CSS多列布局

---

轉自我的博客

須要注意的是：本篇文章的佈局，都未對父元素進行清除浮動的操做，因此在有一些使用了float的佈局中，須要在parent容器清除浮動，才能在實際狀況下使用。（清除浮動的方式在這裏不作討論）

一列定寬一列自適應

這部分的html結構以下：

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

你們先來看看直接在左側添加浮動是怎麼樣的吧：

不要以爲詫異！由於float最開始的出現就是爲了實現這個文字環繞效果的，只不過被攻城師們玩壞了，用到了佈局上；但這確定不是咱們想要的，來看看咱們想要的是怎麼樣的吧！

這樣纔對嘛！是咱們想要的！下面就來看看css的實現吧：

1. float+margin

.left{   
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}

優勢：兼容IE7+，便於理解；缺點：不兼容IE6，在right內部第一個元素存在清除浮動時，會發生right掉下去的狀況。

一塊兒來看看錯誤的例子：

怎麼解決呢？

2. 改進版---float+margin+fix

優勢：兼容性好，兼容全部瀏覽器；缺點：結構增長，樣式複雜。

佈局改變以下：

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <!-- html部分在這個地方進行了添加，使用right-fix把原有結構包裹住了 -->
    <div class="right-fix">
        <div class="right">
            <p >right</p>
            <p>right</p>
        </div>
    </div>
</div>

css部分：

.left{
    float: left; width: 100px;
    position: relative; /*提高左邊的層級*/
}
.right-fix{
    float: right; width: 100%;
    margin-left: -100px;/*處理右邊掉下來的狀況*/
}
.right{
    margin-left: 120px;
}

3. float+overflow

優勢：設置簡單；

.left{
    float:left;
    width:100px;
    margin-right:20px;
}
.right{
    overflow:hidden;/*觸發BFC*/
    /*_zoom:1;*/ /*IE6使用zoom:1來觸發BFC*/
}

3. table

HTML結構仍是和第一個同樣。

優勢：加速table渲染，實現佈局優先；缺點：代碼量大，複雜

.parent{
    display: table; width: 100%;
    table-layout: fixed;/*加速table渲染，實現佈局優先*/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

4. flex

優勢：結構簡單；缺點：兼容性差iE10+，性能很差，經常使用做小範圍佈局

.parent{
    display: flex;
 }
 .left{
    width: 100px;
    margin-right: 20px;
 }
 .right{
    flex:1;/**/
 }

多列定寬一列自適應

你們來看看想要達到的效果：

其實只是在上面的佈局上，中間再加入一個center。
html結構以下：

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

css部分：把center設置和left同樣

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

一列不定寬,一列自適應

HTML結構同一列定寬一列自適應。
其實就是對一列定寬,一列自適應的後三個進行一下改造

實現效果和上面同樣，可是寬度不在固定了！

1. float+overflow

優勢：兼容性好，使用最多，結構簡單；（其實和上面的改變就是左側使用內容去撐開高度，由於原來的實現已經達到了這個效果）

.left{
    float:left;
    margin-right:20px;
    /*width:200px;*//*可設置寬度，也可以使用內容撐開*/
}
.right{
    overflow:hidden;
}
.left p{width:200px;}/*使用內容去撐開寬度*/

2. table

缺點：支持IE8+，設置複雜。

對css進行以下更改：

.parent{
    display: table; width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;/*只要足夠小就行*/
    padding-right: 20px;
}
.left p{width:200px;}/*使用內容去撐開寬度*/

3. flex

缺點：仍是上面的問題

.parent{
    display: flex;
 }
 .left{
    margin-right: 20px;
 }
 .right{
    flex:1;/**/
 }
 .left p{width:200px;}/*使用內容去撐開寬度*/

兩列不定寬，一列自適應。

HTML結構同兩列定寬一列自適應。
以float+overflow爲例，只須要把center設置和left同樣就能夠了。

.left,.center{
    float: left;
    margin-right: 20px;
}

除了這個方法以外，上面的不定寬中的三個方法都能使用

等分佈局

html結構以下：

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

按照慣例，先來分析一下實現過程。能夠看到下圖：

其實咱們只須要給父容器增長一個G，也就是一個負的margin就能夠實現了，下面就來看看吧：

1. float+margin

優勢：設置簡單；缺點：支持IE8+，在佈局變動時，需改變css樣式（width：XX%）結構和樣式耦合在了一塊兒

p{background:#666;}/*對div中的p標籤設置纔有間隔效果，因此在設置內容時，也是在p中設置*/
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

實現效果以下：

效果不是就達到了呢？其實還不盡然，能夠看到最左邊還有一個寬度，咱們不想要怎麼辦？

這並非一個bug，而是咱們的設置致使的，如今來刪除上面的 padding-left: 20px;吧，能夠看到成了這樣子：

若是你須要有填充的話，自行設置吧

2. table+(fix)

html部分在上面的基礎上，在最外層增長<div class="parent-fix">包裹住<div class="parent">

.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;/*佈局優先，且在單元格未設寬度時，將被內容平分*/
}
.column{
    display: table-cell;
    padding-left: 20px;/*間隔，自行考慮是否取消*/
}

3. flex

.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{/*給後三列設置間隔*/
    margin-left:20px;
}

實現效果以下：

這裏使用的是margin，由於flex自動分配剩餘空間

等高佈局

你們先來看看想要的效果：

是否是很熟悉？html和第一部分同樣：
可是兩側高度等同於高度最高的部分。

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

在使用table和flex佈局時就天然實現了等高佈局

這裏就不貼了，代碼實現參考上面。主要是下面這個方案：

float實現

實際上沒有徹底相同，只是達到了效果

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

再一次提醒：實際狀況中使用，須要在外層容器清除浮動。