欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)多行多列的布局的實例代碼

  發(fā)布時間:2018-02-28 16:07:29   作者:佚名   我要評論
這篇文章主要介紹了CSS實現(xiàn)多行多列的布局的實例代碼,需要的朋友可以參考下

1.兩列多行:

 

HTML:

<div class="box1">
    box1:實現(xiàn)兩列多行布局
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

CSS:

.box1 {
  width: 500px;
  background: #EEEEEE;
}
.box1 ul {
  clear: both;
  overflow: hidden;
}
.box1 ul li {
  width: 48%;
  height: 100px;
  margin-bottom: 10px;
  background: skyblue;
  float: left;
}
.box1 ul li:nth-child(even) {
  margin-left: 4%;
}

這用到了nth-child(),兼容ie9及以上的瀏覽器,中間的空隙就是兩個并排div寬度之和,100%減去后剩下的寬度;

既然提到了nth-child(),那么就要說一下nth-of-type(),也是只兼容ie9及以上的瀏覽器。它與nth-child的區(qū)別是:

<div class="box">
    <h1></h1>
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</div>

如果要讓第二個p標(biāo)簽背景為紅色,那么,p:nth-child(4)這個能實現(xiàn)效果;而p:nth-of-type(2),就能實現(xiàn)。所以nth-of-type不管p標(biāo)簽前面有多少內(nèi)容,都只認(rèn)p的第二個元素。而nth-child卻是找它父級的第幾個元素。在這種情況下nth-of-type的優(yōu)點就體現(xiàn)出來了。

2.多行多列

 

HTML:

<div class="box2">
    box2:多行多列
    <ul>
        <li>
            <div class="com">
                111
            </div>
        </li>
        <li>
            <div class="com">
                222
            </div>
        </li>
        <li>
            <div class="com">
                333
            </div>
        </li>
        <li>
            <div class="com">
                444
            </div>
        </li>
    </ul>
</div>

CSS:

.box2 {
  background: #EEEEEE;
  margin-top: 20px;
  width: 500px;
}
.box2 ul {
  overflow: hidden;
  margin-left: -10px;
  background: #EEEEEE;
}
.box2 ul li {
  width: 33.3333%;
  height: 50px;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.box2 ul li .com {
  height: inherit;
  background: skyblue;
}

這里實現(xiàn)的原理是:子級使用padding-left(元素間的間隙)和box-sizing:border-box,父級使用margin-left負(fù)值,這個值和子級padding-left是一樣的。li里面加div只是為了讓效果明顯,不然給li加上背景,由于box-sizing:border-box的存在,li看起來就是沒效果全部連在一起的。

如果要實現(xiàn)2列,4列,5列等多列,只需修改li的寬度(平均分配)就行了。

這種做法兼容ie8及以上的瀏覽器,在ie7下,每個li的寬度大概比正常的少2%左右,比如3列,正常顯示的話,每個li寬度是33.333%,但是ie7下需設(shè)置31.333%,才能基本正常顯示。。。這具體的原因沒深究,后面有時間再來補這個坑 ×××

3.圣杯布局:

 

HTML:

<div class="box3">
    <div class="header">圣杯布局(使用浮動)頂部</div>
    <div class="container">
        <div class="center">
            中間自適應(yīng)寬度,注意這個center是在left的div前面
        </div>
        <div class="left">
            左部固定寬度
        </div>
        <div class="right">
            右部固定寬度
        </div>
    </div>
    <div class="footer">圣杯布局底部</div>
</div>

CSS:

.box3 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box3 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box3 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
}
.box3 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: -100%;
  position: relative;
  left: -100px;
}
.box3 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box3 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: -130px;
  position: relative;
  right: -130px;
}
.box3 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

圣杯布局最主要的是中間那并列的3個div,上下兩個div,我只是拿來充數(shù)的。。。

實現(xiàn)過程大致如下:1.這三個div的HTML擺放的先后順序是有講究的,center這個顯示在中間的div,在html里是排在最前面的,然后是left,最后是right。

2.在container沒有設(shè)置padding,left這個div和right這個div都沒設(shè)置margin與相對定位relative之前,三個div都float:left。這時候頁面上顯示的是center獨占一行,然后是left這個div,然后是right這個div

3.然后left這個div設(shè)置margin-left:-100%。這樣left就能從第二排蹦到第一排最左邊并覆蓋center這個div。

4.right這個div設(shè)置margin-left: -130px;這個值是它自己寬度的大小。然后right這個div也蹦到第一排最右邊并覆蓋center這個div。

5.這個時候container設(shè)置padding,這個padding的大小是left與right這兩個div分別的寬度,然后left與right這兩個div分別再設(shè)置相對定位,移動自己寬度的距離,就正常顯示了。

這種布局方式ie7都兼容,ie6沒有測試過。。。

4.仿圣杯布局

 

HTML:

<div class="box4">
    <div class="header">圣杯布局2(使用定位)頂部</div>
    <div class="container">
        <div class="left">
            左部固定寬度
        </div>
        <div class="center">
            中間自適應(yīng)寬度,無需考慮順序
        </div>
        <div class="right">
            右部固定寬度
        </div>
    </div>
    <div class="footer">圣杯布局2底部</div>
</div>

CSS:

.box4 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box4 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box4 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
  position: relative;
}
.box4 .container .left {
  width: 100px;
  background: #008B8B;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.box4 .container .center {
  background: #00BFFF;
  height: 100px;
  width: 100%;
}
.box4 .container .right {
  width: 130px;
  background: #FA8072;
  height: 100px;
  position: absolute;
  top: 0px;
  right: 0px;
}
.box4 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

這種方式實現(xiàn)的思路是:左右兩邊絕對定位,然后中間的div設(shè)置padding,也能達(dá)到同樣的效果。也不用在意中間的三個div的排版順序,我一直都在用這種方式。

也兼容ie7,ie6沒測試過

5.雙飛翼布局

 

HTML:

<div class="box5">
    <div class="header">雙飛翼布局頂部</div>
    <div class="container">
        <div class="center">
            <div class="center-in">
                中間自適應(yīng)寬度,注意這個center是在left的div前面
            </div>
        </div>
        <div class="left">
            左部固定寬度
        </div>
        <div class="right">
            右部固定寬度
        </div>
    </div>
    <div class="footer">雙飛翼布局底部</div>
</div>

CSS:

.box5 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box5 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box5 .container {
  clear: both;
  overflow: hidden;
}
.box5 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: -100%;
}
.box5 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box5 .container .center .center-in {
  margin: 0 130px 0 100px;
}
.box5 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: -130px;
}
.box5 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

雙飛翼布局和圣杯布局看起來都差不多,但是最大的不同就是:雙飛翼布局中center中間的這個div里面還有一個div,主要通過這個div的margin值來達(dá)到布局的目的。然后left和right這兩個div都不用再設(shè)置相對定位relative。其它的都基本一樣

兼容ie7,ie6未測試過。

還有許多多行多列的布局方式,比如css3的flex,inline-block等等。。只要有思路,再難的布局都能實現(xiàn)。

總結(jié)

以上所述是小編給大家介紹的CSS實現(xiàn)多行多列的布局,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 詳解css布局實現(xiàn)左中右布局的5種方式

    這篇文章主要介紹了詳解css布局實現(xiàn)左中右布局的5種方式的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-05
  • css Flex布局的可伸縮性(Flexibility)

    這篇文章主要介紹了css Flex布局的可伸縮性(Flexibility)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-07
  • 淺談css網(wǎng)頁的幾種布局

    這篇文章主要介紹了淺談css網(wǎng)頁的幾種布局的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-08
  • 如何理解 CSS 布局和塊級格式上下文

    這篇文章主要介紹了如何理解 CSS 布局和塊級格式上下文的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-14
  • 淺談css sticker-footer 布局

    本篇文章主要介紹了css sticker-footer 布局,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-06
  • 詳解使用CSS3的@media來編寫響應(yīng)式的頁面

    這篇文章主要介紹了詳解使用CSS3的@media來編寫響應(yīng)式的頁面,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-01
  • CSS布局方案小結(jié)

    這篇文章主要介紹了CSS布局方案小結(jié),非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2018-03-13

最新評論