两列自适应布局方案整理

starsfun 发布于2019-08-30 12:45 / 2465人阅读

摘要：前提本文讨论的是两列自适应布局左列定宽不定宽，右列自适应。左列不定宽，右列自适应形成的间隔通过设置来触发特性这个方法主要是应用到的一个特性浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。

前提

本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。

虽然分这两种情况，但实际上不定宽的方案同样适用于定宽的场景，因此不定宽的方案泛用度更高。

左列定宽，右列自适应 margin + float


    left
    
        
            right
right

    .left{
        float: left;     //向左浮动
        width: 100px;    //固定宽度
        position: relative;//由于.left与.right-fix重合，且.right-fix在DOM树上的位置比.left要后，因此.right-fix会遮挡住.left，设置.left为relative可以让其冒出来。
    }
    .right-fix{
        float: right;     //向右浮动
        width: 100%;    //为了自适应设为100%
        margin-left: -100px;//由于宽度设为100%，.right-fix遭到浏览器换行处理；因此通过设置负的margin值，在左侧制造出100px的空白，使.right-fix与.left重合（即处于同一行）
    }
    .right{
        margin-left: 120px;    //由于.left和.right-fix重合了，因此给.right设置一个margin-left，避免内容区（.right）与.left重合。另外，120px - 100px = 多出来的20px实际上就相当于.left和.right之间的间隔了。
    }

这个方法其实已经是兼顾到低版本IE的完善版本了，缺点是代码冗长，而且有两个关键知识点比较难理解：

给.left加上position:relative;怎么就能让.left冒出来而不受.right-fix的遮挡了呢？

.right-fix设置负的margin-left，怎么就能使.left与.right-fix重合了呢？

再者，这个方案由于.right-fix的margin-left和.left的width高度耦合，因此无法实现自适应，只能应用在左列（当然右列也成）固定宽度的场景。

absolute


    
        left
    
    
        right
        right

.parent{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    width: 100px;
}
.right{
    position: absolute;
    left: 120px;    //比.left的left多出20px，相当于间隔
    right: 0;
}

这种方法是通过absolute配合left/right进行布局：

设置display: absolute后，通过top/right/bottom/left可以实现对元素的位置进行像素级的任意控制。因此，使用left属性即可控制各元素的起始位置，避免重叠。

自适应的关键在于left和right属性，在对元素同时设置这两个属性后，元素的宽度便会遭到拉伸，实现自适应。

需要注意的是父级元素需要设置display: relative。

这种方案很容易理解，但缺点就是不能做到“不定宽”，因为.left和.right的left属性的值高度相关。

左列不定宽，右列自适应 float + BFC


    
        left
    
    
        right
        right

.left{
    float: left;
    width: 100px;
    margin-right: 20px;    //形成20px的间隔
}
.right{
    overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}

这个方法主要是应用到BFC的一个特性：

浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖。

若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。

浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度。

并不是一定要在.right上用overflow: hidden;，只要能触发BFC就好了，另外在IE6上也可以触发haslayout特性（推荐用*zoom: 1;）。
由于.right的宽度是自动计算的，不需要设置任何与.left宽度相关的css，因此.left的宽度可以不固定（由内容盒子决定）。

table布局


    
        left
    
    
        right
        right

.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

这个方法是表格布局的典型运用。说真的，我也很迷惘要不要使用表格布局，毕竟已经是上个时代的产物了，虽然已经不再用

的HTML结构了，但用上相应的CSS其实思路跟以前是变化不大的。
这个方法主要是利用了表格(table)的宽度必然等于其所有单元格(table-cell)加起来的总宽度，那么只要表格的宽度一定，其中一个（或几个）单元格的宽度也一定，那么另外一个未设置宽度的单元格则会默认占满剩下的宽度，即实现自适应。

flex


    
        left
    
    
        right
        right

.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
.left p{width: 200px;}

flex布局的自适应我就不多说了，本来就是设计来自适应的，只需要用上flex: 1;，就能让.right分到.parent的宽度减去.left的宽度。

推荐使用

我个人是比较推荐用float + BFC方案，浏览器兼容性很好，代码量也少，另外也很好理解；移动端上也可以考虑用上flex方案，不过还是那一句，注意用旧版的flex，兼容性会好一点。

扩展

说是说“两列自适应布局”，实际上，只要满足“只有一列是自适应”这一条件，多少列布局都行。

参考文章

《The Definitive Guide to Using Negative Margins》

《前端精选文摘：BFC 神奇背后的原理》

云服务器混合云右列自适应大数据收集整理方案数据整理及存储方案 idc机房布局方案

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

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

多列布局方案整理

摘要：了解中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见例如两列布局，多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。了解 CSS 中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列...

Euphoria 2019-08-30 12:48 评论0 收藏0
多列布局方案整理

摘要：了解中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见例如两列布局，多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。了解 CSS 中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列...

Taste 2019-08-01 15:06 评论0 收藏0
前端面试重点之——多列布局

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

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

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

superPershing 2019-08-23 18:40 评论0 收藏0
前端面试重点之——多列布局

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

makeFoxPlay 2019-08-30 11:25 评论0 收藏0