在页面开发中，当我们拿到设计师给出的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;}(文中样式代码中的背景颜色可自行添加)
说明：
- BFC（块级格式上下文），可以实现和浮动元素共存，且不会遮挡浮动元素，通过overflow:hidden,
作用：避免边距折叠，不被浮动元素遮盖。且BFC能够将内容元素浮动清除，避免高度塌陷。
喜欢那就点个赞吧????
（完）