表格在连续4次后浮动TD

Question

我想要一个每行有4个TD的表，然后自动换行到新行。在html中我想列出TD，因为我将不断添加更多单元格，并且需要按字母顺序排列但不想在每次添加新单元时继续移动。每个都将包含图像和文本（可能是几个单词）。

我不明白我是否会使用Float或Counter或其他东西使它们换成4个单元格宽。最后一行，如果不是完全填满，则不需要居中。边界也不是必需的。

它应该是这样的（但是最后一行的单元格有一个漂亮的空白单元格）

Answer 1

不要使用桌子。

由于您有一个列表（您明确地称之为），请使用列表。

<ul class="tiles">
    <li>...</li>
    ...
</ul>

然后应用魔术CSS：

.tiles {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.tiles>li {
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    border: 1px solid black;
    padding: 4px;
}