首頁  >  文章  >  web前端  >  關於CSS如何實現多行多列佈局的方法

關於CSS如何實現多行多列佈局的方法

不言
不言原創
2018-06-20 16:33:484969瀏覽

這篇文章主要介紹了CSS實作多行多列的佈局的實例程式碼,需要的朋友可以參考下

1.兩列多行:

 

#HTML:

<p class="box1">
    box1:实现两列多行布局
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</p>

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以上的瀏覽器,中間的空隙就是兩個並排p寬度之和,100%減去後剩下的寬度;

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

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

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

2.多行多列

HTML:

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

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

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

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

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

#3.聖杯佈局:

 

HTML:

<p class="box3">
    <p class="header">圣杯布局(使用浮动)顶部</p>
    <p class="container">
        <p class="center">
            中间自适应宽度,注意这个center是在left的p前面
        </p>
        <p class="left">
            左部固定宽度
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局底部</p>
</p>

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個p,上下兩個p,我只是拿來充數的。 。 。

實作過程大致如下:1.這三個p的HTML擺放的先後順序是有講究的,center這個顯示在中間的p,在html裡是排在最前面的,然後是left ,最後是right。

2.在container沒有設定padding,left這個p和right這個p都沒設定margin與相對定位relative之前,三個p都float:left。這時候頁面上顯示的是center獨佔一行,然後是left這個p,然後是right這個p

#3.然後left這個p設定margin-left:-100%。這樣left就能從第二排蹦到第一排最左邊並覆蓋center這個p。

4.right這個p設定margin-left: -130px;這個值是它自己寬度的大小。然後right這個p也蹦到第一排最右邊並覆蓋center這個p。

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

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

4.仿聖杯版面

 

HTML:

<p class="box4">
    <p class="header">圣杯布局2(使用定位)顶部</p>
    <p class="container">
        <p class="left">
            左部固定宽度
        </p>
        <p class="center">
            中间自适应宽度,无需考虑顺序
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">圣杯布局2底部</p>
</p>

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

這種方式實作的想法是:左右兩邊絕對定位,然後中間的p設定padding,也能達到相同的效果。也不用在意中間的三個p的排版順序,我一直都在用這種方式。

也相容ie7,ie6沒測試過

5.雙飛翼佈局

 

HTML:

<p class="box5">
    <p class="header">双飞翼布局顶部</p>
    <p class="container">
        <p class="center">
            <p class="center-in">
                中间自适应宽度,注意这个center是在left的p前面
            </p>
        </p>
        <p class="left">
            左部固定宽度
        </p>
        <p class="right">
            右部固定宽度
        </p>
    </p>
    <p class="footer">双飞翼布局底部</p>
</p>

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中間的這個p裡面還有一個p,主要透過這個p的margin值來達到佈局的目的。然後left和right這兩個p都不用再設定相對定位relative。其它的都基本一樣

相容ie7,ie6未測試過。

還有許多多行多列的佈局方式,例如css3的flex,inline-block等等。 。只要有思路,再難的佈局都能實現。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於css3中矩陣的使用方法

如何使用CSS實作滑鼠上移圖示旋轉的效果

#

以上是關於CSS如何實現多行多列佈局的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn