Html 如何限制每行的单元格数？

我正在尝试用html创建这种布局

如何限制每行显示的数量

---

你能在不使用表格的情况下实现这种布局吗？如果是，如何指定？

无法指定HTML表格的高度和宽度（以单元格数为单位），因为每个单元格必须使用

和

标记（代表表格数据）自行指定。但是，您可以以像素或页面的百分比或点等为单位指定表格的宽度。您还可以确定文本的对齐方式，或CSS可以定义的任何其他内容。看

我将用于基本表的代码如下所示：

12345
678910

尝试使用“主控”并在其中插入元素，所有元素都使用相同的类：

<div id="master">
    <div class="cell">
    Your data goes here!
    </div>
    <!-- ... ... more cell elements ... ... ... -->
</div>

基本上，我会把百分比弄得乱七八糟，直到你觉得合适为止。要确定每个单元格使用的百分比，请取100，然后除以所需的元素数。然后，您将根据需要（向下）调整该值

---

我确信有一种更好的方法可以做到这一点，但这就是我在过去取得类似效果的方式，而且页面效果非常好。

不完全确定为什么要在没有

表的情况下执行此操作，但您可以使用以下css
显示
规则

div#container{display: table;}
div#row{display: table-row;}
div#row div{display: table-cell; border:1px solid red;}

仅以边界为例

HTML


内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

您希望这是液体吗？也就是说，你可以添加任意数量的单元格，并且它会固定在你的宽度上？每行的元素数是静态的吗？我们不喜欢表格的原因是什么？灵活性、可维护性、效率…？对不起，我想我假设你要做的是创建一个实际的表格。
#master {
    margin-left: 10%;
    margin-right: 10%;
}
.cell {
    width: 23%; /* This is for appx. 4 per row, it leaves 1% for margin, etc. */
    height: 150px;
}

div#container{display: table;}
div#row{display: table-row;}
div#row div{display: table-cell; border:1px solid red;}

<div id="container">
    <div id="row">
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
        <div>Content</div> 
        <div>Content</div>        
    </div>
    <div id="row">
        <div>Content</div>
        <div>Content</div>
        <div>Content</div>
        <div>Content</div> 
        <div>Content</div>        
    </div>    
</div>