了解 CSS 中屬性的值及其特性， 透徹分析問題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。

多列布局在網(wǎng)頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應(yīng)， 或者多列不定寬一列自適應(yīng)還有等分布局等。

定寬-自適應(yīng)

有如下布局

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

float+margin

.left {float: left;width: 100px;}.right {margin-left: 100px/*間距可再加入 margin-left */}

優(yōu)點(diǎn)：容易理解
缺點(diǎn)：IE6中會(huì)有3像素的BUG， 解決方法可以在.left 加入 margin-left:-3px。
因?yàn)閘eft是浮動(dòng)元素，right是沒有浮動(dòng)的，如果right內(nèi)容中有清楚浮動(dòng)就會(huì)產(chǎn)生bug。

改進(jìn)：float + margin + (fix)

<div class="parent"><div class="left"><p>left</p></div>/*外層在包裹一個(gè)容器*/<div class="right-fix"><div class="right"><p>right</p><p>right</p></div></div> </div> <style>.left {float: left;width: 100px;}.right-fix {float: right;width: 100%;margin-left: -100px;}.right {margin-left: 100px/*間距可再加入 margin-left */} </style>

兼容性很好，適用于多版本瀏覽器（包括 IE6）但是多了層right-fix的結(jié)構(gòu)。但left不可選擇，被right-fix蓋住。需要設(shè)置left的 position: relative;來提高層級。

float+overflow

.left{ float: left;width: 100px;margin-right: 20px;}.right{ overflow: hidden; //觸發(fā)BFC }

overflow:hidden使得div產(chǎn)生了BFC 模式（Block Formatting Context）塊級格式化文本，根據(jù)BFC的布局規(guī)則之一，div那個(gè)產(chǎn)生的BFC區(qū)域不會(huì)與左邊浮動(dòng)的元素所重疊。具體什么是BFC可以看看這篇文章

table

.parent {display: table;width: 100%;table-layout: fixed;}.left {display: table-cell;width: 100px;}.right {display: table-cell;/*寬度為剩余寬度*/}

table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設(shè)定布局優(yōu)先。

table-cell 中不可以設(shè)置 margin 但是可以通過 padding 來設(shè)置間距。

flex

.parent{ display: flex ; }.left { width: 100px;margin-right: 20px;}.right{/*等價(jià)于flex:1 1 0; 增長因子和收縮因子都為1，基礎(chǔ)寬度為0,那么剩余寬度都分配給right*/flex: 1 ; }

flex-item 默認(rèn)為內(nèi)容寬度。
缺點(diǎn)： CSS3 兼容性。根據(jù)內(nèi)容判斷，性能會(huì)有問題，做小范圍布局，不適合大范圍布局。

不定寬-自適應(yīng)

float + overflow

.left{ float: left;width: 200px;margin-right: 20px;}.right{ overflow: hidden; //觸發(fā)BFC }

table

.parent{ display:table; width: 100%;}.left, .right { display: table-cell;}.left{ width:0.1%; //寫的夠小就行，不寫1px的原因是IE8會(huì)有問題padding-right:20px; }.left p{ width : 200px;} //用內(nèi)部元素?fù)伍_，寬度可以不定

flex

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

三列不定寬 + 自適應(yīng) 與兩列的做法一樣

等分布局

每一列的寬度和間距均相等。
有如下HTML結(jié)構(gòu)

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div> </div>

float

.parent{margin-left ：-20px; //為父元素增加20px寬度}.column{float : left;width: 25%;padding-left : 20px;box-sizing : border-box;}

缺點(diǎn)：結(jié)構(gòu)和樣式稍微有點(diǎn)耦合性

table

.parent-fix{ margin-left ：-20px; //為父元素增加20px寬度 }.parent{ display : table;width : 100%;table-layout : fixed;} .column{float : left;width: 25%;padding-left : 20px;box-sizing : border-box;}

fix

.parent{ display : flex;} .column{flex: 1;}.column+.column{ margin-left: 20px; } //選擇2，3，4

等高需求

table

上面自適應(yīng)的table布局就具有登高的布局

flex

如上面自適應(yīng)的例子，flex 天然等高

float

.parent{ overflow : hidden; }.left, .right{padding-bottom : 9999px;margin-bottom : -9999px;}

優(yōu)點(diǎn)是兼容性比較好
缺點(diǎn)是偽等高 不是正真意義上的登高

總結(jié)

以上是生活随笔為你收集整理的多列布局方案整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。