在頁面開發(fā)中，當(dāng)我們拿到設(shè)計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發(fā)中常見多列布局問題的解決方法。一般，按列數(shù)分的可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。
目錄
一、定寬+自適應(yīng)兩列布局
二、兩列定寬，一列自適應(yīng)布局
三、左邊不定寬，右邊自適應(yīng)布局
四、多列不定寬，一列自適應(yīng)
五、等寬布局解決方案
六、等高布局解決方案
(文中Css代碼中顏色需自行添加)
一、定寬+自適應(yīng)兩列布局
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p></div>
</div>
-
需求：實現(xiàn)左側(cè)100px，右側(cè)自適應(yīng)，且間距20px
image-20190623235624776.png
方法一：左側(cè)浮動，右側(cè)寬度通過margin調(diào)整
.left {
float: left;
width: 100px;
}
.right {
margin-left: 120px; //相差的20px是左右之間的間距
}
方法二：左側(cè)浮動，右側(cè)BFC
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
方法三：table
單元格默認會等寬，但是table-layout: fixed能夠讓table元素布局優(yōu)先，。
.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);
}
二、兩列定寬，一列自適應(yīng)布局
多列布局用到的屬性原理基本都一樣，上面的方法也同樣適用于此。
<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自適應(yīng)。
需求2：left和right定寬100px，center自適應(yīng)。
需求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的內(nèi)嵌包裹塊，方便設(shè)置間距，注意在設(shè)置center寬度為100%的時候，要將center的盒模型轉(zhuǎn)換為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%;
}
三、左邊不定寬，右邊自適應(yīng)布局
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p></div>
</div>
- 需求：左側(cè)不定寬，右側(cè)自適應(yīng)，間距20px。
方法一：float + overflow
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
方法二：table布局
由內(nèi)容決定寬度，不由布局決定寬度，取消table-layout：fixed的作用
.parent {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left {
width: 0.1% //取最小寬度，實際寬度由內(nèi)容決定
padding-right: 20px;
}
方法三：flex
.parent {
diaplay: flex;
}
.left {
margin-right: 20px;
}
.right {
flex: 1;
}
四、多列不定寬，一列自適應(yīng)
同 **三、左邊不定寬，右邊自適應(yīng)布局 ** 方法相同。
五、等寬布局解決方案
<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，并設(shè)置寬度使得寬度再增加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（塊級格式上下文），可以實現(xiàn)和浮動元素共存，且不會遮擋浮動元素，通過overflow:hidden,
作用：避免邊距折疊，不被浮動元素遮蓋。且BFC能夠?qū)?nèi)容元素浮動清除，避免高度塌陷。
喜歡那就點個贊吧??
（完）
