1.兩列多行：
HTML:
css;"><div class="box1"> box1:實(shí)現(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及以上的瀏覽器，中間的空隙就是兩個(gè)并排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>
如果要讓第二個(gè)p標(biāo)簽背景為紅色，那么，p:nth-child(4)這個(gè)能實(shí)現(xiàn)效果；而p:nth-of-type(2)，就能實(shí)現(xiàn)。所以nth-of-type不管p標(biāo)簽前面有多少內(nèi)容，都只認(rèn)p的第二個(gè)元素。而nth-child卻是找它父級(jí)的第幾個(gè)元素。在這種情況下nth-of-type的優(yōu)點(diǎn)就體現(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;} 這里實(shí)現(xiàn)的原理是：子級(jí)使用padding-left（元素間的間隙）和box-sizing:border-box，父級(jí)使用margin-left負(fù)值，這個(gè)值和子級(jí)padding-left是一樣的。li里面加div只是為了讓效果明顯，不然給li加上背景，由于box-sizing：border-box的存在，li看起來就是沒效果全部連在一起的。
如果要實(shí)現(xiàn)2列，4列，5列等多列，只需修改li的寬度（平均分配）就行了。
這種做法兼容ie8及以上的瀏覽器，在ie7下，每個(gè)li的寬度大概比正常的少2%左右，比如3列，正常顯示的話，每個(gè)li寬度是33.333%，但是ie7下需設(shè)置31.333%，才能基本正常顯示。。。這具體的原因沒深究，后面有時(shí)間再來補(bǔ)這個(gè)坑 ×××
3.圣杯布局：
HTML:
<div class="box3"> <div class="header">圣杯布局(使用浮動(dòng))頂部</div> <div class="container"> <div class="center"> 中間自適應(yīng)寬度,注意這個(gè)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個(gè)div，上下兩個(gè)div，我只是拿來充數(shù)的。。。
實(shí)現(xiàn)過程大致如下：1.這三個(gè)div的HTML擺放的先后順序是有講究的，center這個(gè)顯示在中間的div，在html里是排在最前面的，然后是left，最后是right。
2.在container沒有設(shè)置padding，left這個(gè)div和right這個(gè)div都沒設(shè)置margin與相對(duì)定位relative之前，三個(gè)div都float：left。這時(shí)候頁面上顯示的是center獨(dú)占一行，然后是left這個(gè)div，然后是right這個(gè)div
3.然后left這個(gè)div設(shè)置margin-left：-100%。這樣left就能從第二排蹦到第一排最左邊并覆蓋center這個(gè)div。
4.right這個(gè)div設(shè)置margin-left: -130px;這個(gè)值是它自己寬度的大小。然后right這個(gè)div也蹦到第一排最右邊并覆蓋center這個(gè)div。
5.這個(gè)時(shí)候container設(shè)置padding，這個(gè)padding的大小是left與right這兩個(gè)div分別的寬度，然后left與right這兩個(gè)div分別再設(shè)置相對(duì)定位，移動(dòng)自己寬度的距離，就正常顯示了。
這種布局方式ie7都兼容，ie6沒有測(cè)試過。。。
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;}這種方式實(shí)現(xiàn)的思路是：左右兩邊絕對(duì)定位，然后中間的div設(shè)置padding，也能達(dá)到同樣的效果。也不用在意中間的三個(gè)div的排版順序，我一直都在用這種方式。
也兼容ie7，ie6沒測(cè)試過
5.雙飛翼布局
HTML：
<div class="box5"> <div class="header">雙飛翼布局頂部</div> <div class="container"> <div class="center"> <div class="center-in"> 中間自適應(yīng)寬度,注意這個(gè)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中間的這個(gè)div里面還有一個(gè)div，主要通過這個(gè)div的margin值來達(dá)到布局的目的。然后left和right這兩個(gè)div都不用再設(shè)置相對(duì)定位relative。其它的都基本一樣
兼容ie7，ie6未測(cè)試過。
還有許多多行多列的布局方式，比如css3的flex，inline-block等等。。只要有思路，再難的布局都能實(shí)現(xiàn)。
總結(jié)
以上所述是小編給大家介紹的CSS實(shí)現(xiàn)多行多列的布局，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
