css實現多行多列的布局

1.兩列多行：

 HTML:

<div class="box1">
    box1:實現兩列多行布局
    <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的區別是：

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

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

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

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

　　如果要實現2列，4列，5列等多列，只需修改li的寬度（平均分配）就行了。

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

3.聖杯布局：

HTML:

<div class="box3">
    <div class="header">聖杯布局(使用浮動)頂部</div>
        
    <div class="container">
        <div class="center">
            中間自適應寬度,注意這個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，我只是拿來充數的。。。　　

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

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

　　　　　　　　　　　3.然后left這個div設置margin-left：-100%。這樣left就能從第二排蹦到第一排最左邊並覆蓋center這個div。

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

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

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

　　如果想要這三個div中間有間隙，那么可以設置container的padding值與兩個div的left和right值。比如上面例子想有10px的間隙，那就設置left這個div的left值為-110px，right這個div的right值為-140px,然后設置container的padding:0 140px 0 110px。就能達到效果

4.仿聖杯布局

HTML：

<div class="box4">
    <div class="header">聖杯布局2(使用定位)頂部</div>
            
    <div class="container">
        <div class="left">
            左部固定寬度
        </div>
        <div class="center">
            中間自適應寬度，無需考慮順序
        </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;
}

　　這種方式實現的思路是：左右兩邊絕對定位，然后中間的div設置padding，也能達到同樣的效果。也不用在意中間的三個div的排版順序，我一直都在用這種方式。

　　這種布局想要中間有間隙，就直接設置padding就行了，只要左右padding的值大於左右兩個div的寬度就行了

　　也兼容ie7，ie6沒測試過

5.雙飛翼布局

HTML：

<div class="box5">
    <div class="header">雙飛翼布局頂部</div>
            
    <div class="container">
        <div class="center">
            <div class="center-in">
                中間自適應寬度,注意這個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值來達到布局的目的。然后left和right這兩個div都不用再設置相對定位relative。其它的都基本一樣

　　這個布局的間隙就是設置center這個div里面的div的margin左右的值大於兩邊div寬度就行了。

　　兼容ie7，ie6未測試過。

　　總結：聖杯布局的HTML中div的順序都是自適應寬度的div排最前，然后是固定寬度的div。然后只操作固定寬度的div的margin等值，然后裝這三個div的盒子設置padding值，最后自適應寬度的div就只需設置100%寬度和浮動就行了。

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