這篇文章主要介紹了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中文網其他相關文章！
