CSS多列布局

binta 發(fā)布于2019-08-28 18:29 / 1454人閱讀

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

轉(zhuǎn)自個人博客

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

一列定寬一列自適應(yīng)

這部分的html結(jié)構(gòu)如下：


    
        left
    
    
        right
        right

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

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

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

1. float+margin

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

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

一起來看看錯誤的例子：

怎么解決呢？

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

優(yōu)點：兼容性好，兼容所有瀏覽器；缺點：結(jié)構(gòu)增加，樣式復(fù)雜。

布局改變?nèi)缦拢?/p>

css部分：

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

3. float+overflow

優(yōu)點：設(shè)置簡單；

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

3. table

HTML結(jié)構(gòu)還是和第一個一樣。

優(yōu)點：加速table渲染，實現(xiàn)布局優(yōu)先；缺點：代碼量大，復(fù)雜

.parent{
    display: table; width: 100%;
    table-layout: fixed;/*加速table渲染，實現(xiàn)布局優(yōu)先*/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

4. flex

優(yōu)點：結(jié)構(gòu)簡單；缺點：兼容性差iE10+，性能不好，常用作小范圍布局

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

多列定寬一列自適應(yīng)

大家來看看想要達到的效果：

其實只是在上面的布局上，中間再加入一個center。
html結(jié)構(gòu)如下：

    
    
        left
    
    
        center
    
    
        right
        right

css部分：把center設(shè)置和left一樣

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

一列不定寬,一列自適應(yīng)

HTML結(jié)構(gòu)同一列定寬一列自適應(yīng)。
其實就是對一列定寬,一列自適應(yīng)的后三個進行一下改造

實現(xiàn)效果和上面一樣，但是寬度不在固定了！

1. float+overflow

優(yōu)點：兼容性好，使用最多，結(jié)構(gòu)簡單；（其實和上面的改變就是左側(cè)使用內(nèi)容去撐開高度，因為原來的實現(xiàn)已經(jīng)達到了這個效果）

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

2. table

缺點：支持IE8+，設(shè)置復(fù)雜。

對css進行如下更改：

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

3. flex

缺點：還是上面的問題

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

兩列不定寬，一列自適應(yīng)。

HTML結(jié)構(gòu)同兩列定寬一列自適應(yīng)。
以float+overflow為例，只需要把center設(shè)置和left一樣就可以了。

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

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

等分布局

html結(jié)構(gòu)如下：

按照慣例，先來分析一下實現(xiàn)過程?？梢钥吹较聢D：

其實我們只需要給父容器增加一個G，也就是一個負的margin就可以實現(xiàn)了，下面就來看看吧：

1. float+margin

優(yōu)點：設(shè)置簡單；缺點：支持IE8+，在布局變更時，需改變css樣式（width：XX%）結(jié)構(gòu)和樣式耦合在了一起

p{background:#666;}/*對div中的p標簽設(shè)置才有間隔效果，所以在設(shè)置內(nèi)容時，也是在p中設(shè)置*/
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

實現(xiàn)效果如下：

效果不是就達到了呢？其實還不盡然，可以看到最左邊還有一個寬度，我們不想要怎么辦？

這并不是一個bug，而是我們的設(shè)置導(dǎo)致的，現(xiàn)在來刪除上面的 padding-left: 20px;吧，可以看到成了這樣子：

如果你需要有填充的話，自行設(shè)置吧

2. table+(fix)

html部分在上面的基礎(chǔ)上，在最外層增加

包裹住

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

3. flex

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

實現(xiàn)效果如下：

這里使用的是margin，因為flex自動分配剩余空間

等高布局

大家先來看看想要的效果：

是不是很熟悉？html和第一部分一樣：
但是兩側(cè)高度等同于高度最高的部分。


    
        left
    
    
        right
        right

在使用table和flex布局時就自然實現(xiàn)了等高布局

這里就不貼了，代碼實現(xiàn)參考上面。主要是下面這個方案：

float實現(xiàn)

實際上沒有完全相同，只是達到了效果

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111263.html

發(fā)表評論

登陸后可評論

0條評論

binta

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow如何使用

閱讀 2273·2023-04-25 23:15
效率倍增，PyCaret：一個開源、低代碼的 Python 機器學(xué)習(xí)工具

閱讀 1937·2021-11-22 09:34
python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

閱讀 1561·2021-11-15 11:39
傳感與檢測技術(shù)，Pt100熱電阻測溫實驗報告，江南大學(xué)物聯(lián)網(wǎng)

閱讀 967·2021-11-15 11:37
C語言進階：程序預(yù)處理

閱讀 2162·2021-10-14 09:43
CYUN：國慶鉅惠！美國CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

閱讀 3502·2021-09-27 13:59
重溫 Flex 布局

閱讀 1511·2019-08-30 15:43
一步步教你用 CSS 為 SVG 添加濾鏡

閱讀 3474·2019-08-30 15:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS多列布局

相關(guān)文章

css布局：多列等高布局

CSS 常用的定位和布局方法匯總(已添加源碼地址)

H5多列布局

H5多列布局

**純css實現(xiàn)瀑布流（multi-column多列及flex布局）**

發(fā)表評論

0條評論

binta

男|高級講師

TA的文章

tensorflow如何使用

效率倍增，PyCaret：一個開源、低代碼的 Python 機器學(xué)習(xí)工具

python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

傳感與檢測技術(shù)，Pt100熱電阻測溫實驗報告，江南大學(xué)物聯(lián)網(wǎng)

C語言進階：程序預(yù)處理

CYUN：國慶鉅惠！美國CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

重溫 Flex 布局

一步步教你用 CSS 為 SVG 添加濾鏡

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS多列布局

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！