1.兩列多行：
HTML:
| <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（）,那么就要說(shuō)一下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)出來(lái)了。
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加上背景，由于
新聞熱點(diǎn)
疑難解答
圖片精選
