近期在群里看見flex布局九宮格的考題

自己也嘗試試試，半天，無結(jié)果

遂轉(zhuǎn)為div ul table實(shí)現(xiàn)的思路

下面是使用table使用的思路

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

上面就三段正常的table代碼，簡簡單單

table {
width: 90%;
height: 90%;
border-spacing:0;
margin: 5% auto;
border-collapse: collapse;
border: none;
}

table tr {
width: 100%;
}

table tr td {
width: 33.3%;
height: 33.3%;
background: #FF5555;
border-left: 1px #fff solid;
border-top: 1px #fff solid;
}
table tr td:first-child{
border-left: none;
}
table tr:first-child td{
border-top: none;
}

這些是css樣式代碼

td三等分而已，33.33%寬度，高度。有時(shí)候九宮格不需要外部的邊線。想到添加單獨(dú)的class去去掉外部邊框，但是不利于擴(kuò)展

使用了:last-child來實(shí)現(xiàn)，但是，:last-child只是兼容到ie9+.高級瀏覽器還可以

又從lost處得知 ：first-child可以兼容到ie7+.遂使用這個(gè)。

布局簡單，實(shí)現(xiàn)簡單。

參考：http://www.alloyteam.com/2016/01/let-see-css-world

下載鏈接：http://files.cnblogs.com/files/leshao/table%E5%AE%9E%E7%8E%B0%E4%B9%9D%E5%AE%AB%E6%A0%BCfirst-child.rar

?

轉(zhuǎn)載于:https://www.cnblogs.com/leshao/p/5280884.html

總結(jié)

以上是生活随笔為你收集整理的九宫格布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。