摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。

在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類(lèi)似之處。

目錄

一、定寬+自適應(yīng)兩列布局
二、兩列定寬，一列自適應(yīng)布局
三、左邊不定寬，右邊自適應(yīng)布局
四、多列不定寬，一列自適應(yīng)
五、等寬布局解決方案
六、等高布局解決方案

(文中Css代碼中顏色需自行添加)

    
left
    
right

需求：實(shí)現(xiàn)左側(cè)100px，右側(cè)自適應(yīng)，且間距20px

方法一：左側(cè)浮動(dòng)，右側(cè)寬度通過(guò)margin調(diào)整

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

方法二：左側(cè)浮動(dòng)，右側(cè)BFC

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

方法三：table
單元格默認(rèn)會(huì)等寬，但是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()計(jì)算屬性

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

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

   
left
   
center
   
right

需求1：left和center定寬100px，right自適應(yīng)。

需求2：left和right定寬100px，center自適應(yīng)。

需求1使用的方法跟上面有相同之處，不做贅述。重點(diǎn)以需求2為例說(shuō)明。

方法一：父元素相對(duì)布局，子元素絕對(duì)布局

.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%的時(shí)候，要將center的盒模型轉(zhuǎn)換為IE盒模型，這樣它的寬度就包含了padding。

    

        

            
center
        
    
    
left
    
right

.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%;
}

   
left
   
right

需求：左側(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% //取最小寬度，實(shí)際寬度由內(nèi)容決定
    padding-right: 20px;
}

方法三：flex

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

同 三、左邊不定寬，右邊自適應(yīng)布局 方法相同。

    
column1
    
column2
    
column3
    
column4

需求：多列等寬，并保留20px間距。

方法一：margin  +  float

此時(shí)需要考慮多個(gè)間距的問(wèn)題，缺點(diǎn)：需要提前知道有多少列計(jì)算好每列寬度占比+間距，具體就是讓父元素多擁有20px的寬度。

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

方法二：table

此時(shí)需要在parent元素外層再添加一層盒子parent-layout，并設(shè)置寬度使得寬度再增加20px。

    

        
column1
        
column2
        
column3
        
column4
    

.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;
}

除了解決分欄的問(wèn)題之外，我們同時(shí)需要解決分列后等高布局的解決方法：

方法一：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;
}

(文中樣式代碼中的背景顏色可自行添加)

說(shuō)明：
BFC（塊級(jí)格式上下文），可以實(shí)現(xiàn)和浮動(dòng)元素共存，且不會(huì)遮擋浮動(dòng)元素，通過(guò)overflow:hidden,
作用：避免邊距折疊，不被浮動(dòng)元素遮蓋。且BFC能夠?qū)?nèi)容元素浮動(dòng)清除，避免高度塌陷。

喜歡那就點(diǎn)個(gè)贊吧