Question

我想创建一个流畅的布局，如下所示填充整个页面（宽度：100％;高度：100％）。

+----+----+----+----+
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----+----+

在每个单元格内部，我希望div宽度为圆形，并且希望在单元格之间有单元间距。每个单元格需要固定大小（溢出：隐藏）。

有关最佳方法的任何想法吗？

（更新）

我已经尝试过做一个表但是无法控制行和/或单元格的高度增长不成比例，即使它内部的td和div具有固定的百分比高度并且隐藏了溢出。

我也尝试过9个div向左浮动，1个div向右浮动。如果没有设置边距或填充，则效果很好。设置填充和边距（百分比）并补偿宽度和高度（也以百分比表示）。 Nothings似乎是一致的。

我应该继续进一步发展这两个中的哪一个？

Answer 1

<style>
    html, body, table { width:100%; height:100%; }
    td { width:25%; height:33%; }
    div.round { width:100%; height:100%; background:blue; border-radius:5px; overflow:hidden; }
</style>


<table>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td rowspan="3"><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
</table>

如何制作一个填满整个页面的表格

1 个答案: