http://jikemaimai.com/article/detail?a_id=11
某年某日某時某分,麥客我接到一個頁面展示的需求,需達到下面幾種要求:

1.每行只能展示 N 塊 2.塊間距要相等,整體行根據屏幕寬度自適應平均的被塊或間距分布下去 3.整體兩端與中間的塊間距相同 4.每個塊要有圓角效果 5.最后一行如果不滿 N 塊,也要與上一行對應列對齊

大致是下面這種意思,只不過里面的線要換成間距:

<style>.oTable {border: 1px solid black;width: 70%;margin: 0 auto;border-collapse: separate; /*重點1*/border-spacing: 20px; /*重點2*/}.oTable td {border: 1px solid red;border-radius: 5px;overflow: hidden;height: 130px;}.oTable td>div {height: 100%;background: #ccc;}</style> <table class="oTable"><tr><td><div>img1</div></td><td><div>img2</div></td><td><div>img3</div></td><td><div>img4</div></td><td><div>img5</div></td></tr><tr><td><div>img1</div></td><td><div>img2</div></td><td><div>img3</div></td><td><div>img4</div></td><td><div>img5</div></td></tr><tr><td><div>img1</div></td><td><div>img2</div></td></tr> </table>

總結

以上是生活随笔為你收集整理的抛弃flex执念:利用border-collapse实现顺序展示的快速方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。