CSS多列布局

binta 發布于2019-08-28 18:29 / 1448人閱讀

摘要：優點加速渲染，實現布局優先缺點代碼量大，復雜加速渲染，實現布局優先優點結構簡單缺點兼容性差，性能不好，常用作小范圍布局多列定寬一列自適應大家來看看想要達到的效果其實只是在上面的布局上，中間再加入一個。

轉自個人博客

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

一列定寬一列自適應

這部分的html結構如下：


    
        left
    
    
        right
        right

大家先來看看直接在左側添加浮動是怎么樣的吧：

不要覺得詫異！因為float最開始的出現就是為了實現這個文字環繞效果的，只不過被攻城師們玩壞了，用到了布局上；但這肯定不是我們想要的，來看看我們想要的是怎么樣的吧！

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

1. float+margin

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

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

一起來看看錯誤的例子：

怎么解決呢？

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

優點：兼容性好，兼容所有瀏覽器；缺點：結構增加，樣式復雜。

布局改變如下：

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結構如下：

    
    
        left
    
    
        center
    
    
        right
        right

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結構如下：

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

其實我們只需要給父容器增加一個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部分在上面的基礎上，在最外層增加

包裹住

.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和第一部分一樣：
但是兩側高度等同于高度最高的部分。


    
        left
    
    
        right
        right

在使用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://specialneedsforspecialkids.com/yun/111263.html

css布局：多列等高布局

摘要：多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定例如內容是動態的，又需要讓各列自然地撐開不出現每列里面的滾動條，這時候需要用或者的方法把各列高度設置為最高列的高度。多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定（例如內容是動態的），又需要讓各列自然地撐開（不出現每列里面的滾動條），這時候需要用css或者js的方法把各列高度設置為最高列...

Ethan815 2019-08-29 15:05 評論0 收藏0
CSS 常用的定位和布局方法匯總(已添加源碼地址)

CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文常見定位方法水平居中子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。方案選擇基本思路：子元素為行內元素：對父元素設置text-align:center; 定寬塊狀元素: 設...

loonggg 2019-08-29 12:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
純css實現瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了 1.multi-column多列布局實現瀑布流先簡單的講下multi-column相關的部分屬性 column-count設置列數 column-gap設置列與列之間的間距 column-width設置每列的寬度還要結合在子容器中...

DC_er 2019-08-02 16:03 評論0 收藏0