前端面试重点之多列布局

在页面开发中，当我们拿到设计师给出的 UI 图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。

目录

一、定宽 + 自适应两列布局

二、两列定宽，一列自适应布局

三、左边不定宽，右边自适应布局

四、多列不定宽，一列自适应

五、等宽布局解决方案

六、等高布局解决方案

(文中 Css 代码中颜色需自行添加)

一、定宽 + 自适应 两列布局

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p></div>
</div>

• 需求：实现左侧 100px，右侧自适应，且间距 20px

方法一：左侧浮动，右侧宽度通过 margin 调整

.left {
    float: left;
    width: 100px;
}
.right {margin-left: 120px; // 相差的 20px 是左右之间的间距}

方法二：左侧浮动，右侧 BFC

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {overflow: hidden;}

方法三：table

单元格默认会等宽，但是 table-layout: fixed 能够让 table 元素布局优先，。

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

方法四：flex

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

方法五：css3 calc()计算属性

.left {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
}
.right {
    display: inline-block;
    width: calc(100% - 120px);
}

二、两列定宽，一列自适应布局

多列布局用到的属性原理基本都一样，上面的方法也同样适用于此。

<div class="parent">
   <div class="left"><p>left</p></div>
   <div class="center"><p>center</p></div>
   <div class="right"><p>right</p></div>
</div>

• 需求 1：left 和 center 定宽 100px，right 自适应。
• 需求 2：left 和 right 定宽 100px，center 自适应。

需求 1 使用的方法跟上面有相同之处，不做赘述。重点以需求 2 为例说明。

方法一：父元素相对布局，子元素绝对布局

.parent {position: relative;}
.left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
}
.right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
}
.center {margin: 0 120px;}

方法二：flex 布局

.parent {display: flex;}
.left, .right {width: 100px;}
.left {margin-right: 20px;}
.right {margin-left: 20px;}
.center {flex: 1;}

方法三：双飞翼布局

双飞翼布局需要将 center 块提前，并且需要在 center 的内嵌包裹块，方便设置间距，注意在设置 center 宽度为 100% 的时候，要将 center 的盒模型转换为 IE 盒模型，这样它的宽度就包含了 padding。

<div class="parent">
    <div class="center">
        <div class="content">
            <p>center</p>
        </div>
    </div>
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p></div>
</div>

.center, .left, .right {float: left;}
.left {
    width: 100px;
    margin-left: -100%;
}
.right {
    width: 100px;
    margin-left: -100px;
}
.center {
    box-sizing: border-box;
    width: 100%;
    padding-left: 120px;
    padding-right: 120px;
}
.content {height: 100%;}

三、左边不定宽，右边自适应布局

<div class="parent">
   <div class="left"><p>left</p></div>
   <div class="right"><p>right</p></div>
</div>

• 需求：左侧不定宽，右侧自适应，间距 20px。

方法一：float + overflow

.left {
    float: left;
    margin-right: 20px;
}
.right {overflow: hidden;}

方法二：table 布局

由内容决定宽度，不由布局决定宽度，取消 table-layout：fixed 的作用

.parent {
    display: table;
    width: 100%;
}
.left, .right {display: table-cell;}
.left {
    width: 0.1% // 取最小宽度，实际宽度由内容决定
    padding-right: 20px;
}

方法三：flex

.parent {diaplay: flex;}
.left {margin-right: 20px;}
.right {flex: 1;}

四、多列不定宽，一列自适应

同 三、左边不定宽，右边自适应布局 方法相同。

五、等宽布局解决方案

<div class="parent">
    <div class="column"><p>column1</p></div>
    <div class="column"><p>column2</p></div>
    <div class="column"><p>column3</p></div>
    <div class="column"><p>column4</p></div>
</div>

• 需求：多列等宽，并保留 20px 间距。

方法一：margin + float

此时需要考虑多个间距的问题，缺点：需要提前知道有多少列计算好每列宽度占比 + 间距，具体就是让父元素多拥有 20px 的宽度。

.parent {margin-left: -20px;}
.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

方法二：table

此时需要在 parent 元素外层再添加一层盒子 parent-layout，并设置宽度使得宽度再增加 20px。

<div class="parent-layout">
    <div class="parent">
        <div class="column"><p>column1</p></div>
        <div class="column"><p>column2</p></div>
        <div class="column"><p>column3</p></div>
        <div class="column"><p>column4</p></div>
    </div>
</div>

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

方法三：flex

.parent {display: flex;}
.column {flex: 1;}
.column + .column {margin-left: 20px;}

六、等高布局解决方案

除了解决分栏的问题之外，我们同时需要解决分列后等高布局的解决方法：

方法一：table

利用 table 单元格本身具有等高特性

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right  {display: table-cell;}
.left {
    widht: 100px;
    border-right: 20px solid transparent;
    background-clip: padding-box; // 由于是 border-box，需要把背景颜色去掉
}

方法二：flex

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

方法三：float

伪等高

.left, .right  {
    flex: left;
    width: 100%;
    margin-right: 20px;
}
.right {overflow: hidden;}
.left, .right {
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.parent {overflow: hidden;}

(文中样式代码中的背景颜色可自行添加)

说明：

1. BFC（块级格式上下文），可以实现和浮动元素共存，且不会遮挡浮动元素，通过 overflow:hidden,
   作用：避免边距折叠，不被浮动元素遮盖。且 BFC 能够将内容元素浮动清除，避免高度塌陷。

喜欢那就点个赞吧????

（完）