两列布局(一列定宽）

MonoLog 发布于2019-08-29 18:34 / 2819人阅读

摘要：左列定宽需要定宽负值部分在这个地方进行了添加，使用把原有结构包裹住了需要定宽父元素定宽高第一种，同时可以实现等高布局设置列之间的间距第二种方法

左列定宽 float +margin

absolute + margin

.parent{
        position: relative;
    }

    .side{
         position:absolute;
        width:300px;
        top:0px;
        left:0px;
        background:#F00;
    }

    .main{
        background:#0FC;
        margin-left:300px;
    }

margin-left 负值 + float


    
        left
    
    
    
        
            right
            right
        
    


.left{
    float: left; width: 100px;
    position: relative; 
}
.right-fix{
    float: right; width: 100%;
    margin-left: -100px;
}
.right{
    margin-left: 120px;
}

BFC

table 父元素定宽高

//第一种，同时可以实现等高布局


    
        
             left
        
        
             right
             right
        
    


//第二种方法


    
        
             
                 left
             
        
        
             right
             right

flex


     
     


.parent{
    display: flex;
}

.side{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background: #555;
}

.main{
    flex: 1;
    background: #ffffd;
}

GPU云服务器云服务器两列数据合并成一列某题左列定宽右列某两列字符 html ul 两列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114417.html

页面布局解决方案

摘要：页面布局解决方案居中布局水平居中子元素相对于父元素居中且子元素宽度可变。优点兼容性好支持，以下版本需要调整页面结构至优点绝对定位脱离文档流，不会对后续元素的布局造成影响。下面列出了两种布局方案，草案并不稳定，浏览器支持也并不理想。页面布局解决方案居中布局水平居中子元素相对于父元素居中且子元素宽度可变。除了另外声明，HTML结构为以下内容： Demo inline-...

XiNGRZ 2019-08-29 13:03 评论0 收藏0
CSS多列布局

摘要：优点加速渲染，实现布局优先缺点代码量大，复杂加速渲染，实现布局优先优点结构简单缺点兼容性差，性能不好，常用作小范围布局多列定宽一列自适应大家来看看想要达到的效果其实只是在上面的布局上，中间再加入一个。转自个人博客需要注意的是：本篇文章的布局，都未对父元素进行清除浮动的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮动，才能在实际情况下使用。（清除浮动的方...

binta 2019-08-28 18:29 评论0 收藏0
PC端CSS布局汇总

摘要：因为端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对端的布局进行讲解，以下代码只写关键代码。为了提高网页性能，考虑到，表格元素尽量少用，有其他选择的情况尽量用其他布局。前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对P...

zhangxiangliang 2019-08-29 13:55 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

lei___ 2019-08-02 15:33 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

superPershing 2019-08-23 18:40 评论0 收藏0