摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。

在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。

目錄

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

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

    
left
    
right

需求：實現左側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);
}

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

   
left
   
center
   
right

需求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。

    

        

            
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

需求：左側不定寬，右側自適應，間距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;
}

同 三、左邊不定寬，右邊自適應布局 方法相同。

    
column1
    
column2
    
column3
    
column4

需求：多列等寬，并保留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。

    

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

除了解決分欄的問題之外，我們同時需要解決分列后等高布局的解決方法：

方法一：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能夠將內容元素浮動清除，避免高度塌陷。

喜歡那就點個贊吧