成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS多列布局

binta / 1500人閱讀

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

轉(zhuǎn)自個(gè)人博客


需要注意的是：本篇文章的布局，都未對(duì)父元素進(jìn)行清除浮動(dòng)的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動(dòng)，才能在實(shí)際情況下使用。（清除浮動(dòng)的方式在這里不做討論）
一列定寬一列自適應(yīng)

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


    

        
left

    

    

        
right

        
right

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

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

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

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

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

一起來看看錯(cuò)誤的例子：

怎么解決呢？

2. 改進(jìn)版---float+margin+fix

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

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


    

        
left

    

    
    

        

            
right

            
right

css部分：

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

優(yōu)點(diǎn)：設(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)還是和第一個(gè)一樣。

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

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

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

.parent{
    display: flex;
 }
 .left{
    width: 100px;
    margin-right: 20px;
 }
 .right{
    flex:1;/**/
 }
多列定寬一列自適應(yīng)

大家來看看想要達(dá)到的效果：

其實(shí)只是在上面的布局上，中間再加入一個(gè)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)。
其實(shí)就是對(duì)一列定寬,一列自適應(yīng)的后三個(gè)進(jìn)行一下改造

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

1. float+overflow

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

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

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

對(duì)css進(jìn)行如下更改：

.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

缺點(diǎn)：還是上面的問題

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

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

等分布局

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


    
1

    
2

    
3

    
4

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

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

1. float+margin

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

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

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

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

這并不是一個(gè)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è)寬度時(shí)，將被內(nèi)容平分*/
}
.column{
    display: table-cell;
    padding-left: 20px;/*間隔，自行考慮是否取消*/
}
3. flex 
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{/*給后三列設(shè)置間隔*/
    margin-left:20px;
}

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

這里使用的是margin，因?yàn)閒lex自動(dòng)分配剩余空間

等高布局

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

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


    

        
left

    

    

        
right

        
right

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

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

float實(shí)現(xiàn)

實(shí)際上沒有完全相同，只是達(dá)到了效果

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

再一次提醒：實(shí)際情況中使用，需要在外層容器清除浮動(dòng)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111263.html

相關(guān)文章

  • css布局：多列等高布局

    摘要：多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定例如內(nèi)容是動(dòng)態(tài)的，又需要讓各列自然地?fù)伍_不出現(xiàn)每列里面的滾動(dòng)條，這時(shí)候需要用或者的方法把各列高度設(shè)置為最高列的高度。 多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定（例如內(nèi)容是動(dòng)態(tài)的），又需要讓各列自然地?fù)伍_（不出現(xiàn)每列里面的滾動(dòng)條），這時(shí)候需要用css或者js的方法把各列高度設(shè)置為最高列...

    Ethan815 評(píng)論0 收藏0

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

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

    loonggg 評(píng)論0 收藏0

  • H5多列布局

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

    Jingbin_ 評(píng)論0 收藏0

  • H5多列布局

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

    mayaohua 評(píng)論0 收藏0

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

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

    DC_er 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<