html - 用于类似表格布局的最佳 HTML/CSS 模型

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 7 年前。

我想在我的元素中创建以下布局。

我的主要矩形元素可以有 3 个垂直列。中间列分为 3 行。顶行分为 2 列，底行分为 4 列，等等 ...

你可以把它想象成一个表格，有非常不规则的行/列/子行/子列......在最底层有“单元格”，每个单元格的大小取决于它的内容，每个单元格都会有一些内容。我希望单元格之间有相等的空间(例如 1em)

我目前的想法是通过将 DIV 与 display=block 和 display=inline-block 相结合来制作一个树结构。但是如果我设置 margin=1em;单元格的边距将添加到父级的边距并且看起来很难看。有没有更好的解决办法？我听说我应该避免使用表格、colspan 等。

最佳答案

如果您使用这样的结构，您可以在叶 div(单元格)中添加一个类，以便您可以应用 css 语句来区分边距和结构中的其他 div。

类似于:

.cell-div {
    margin: 0 0.5em;
}

关于html - 用于类似表格布局的最佳 HTML/CSS 模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31610842/