CSS多列布局

jopen 8年前發布 | 12K 次閱讀 CSS 前端技術 Adobe Flex

需要注意的是：本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有 一些 使用了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;
}

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

來自： http://guowenfh.github.io/2016/01/10/css-MultiColumn-layout/

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！