用于表格布局的最佳 HTML/CSS 模型 [关闭]答案

【问题标题】：Best HTML/CSS model for table-like layout [closed]用于表格布局的最佳 HTML/CSS 模型 [关闭]
【发布时间】：2023-03-11 01:00:01
【问题描述】：

我想在我的项目中创建以下布局。

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

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

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

【问题讨论】：

【解决方案1】：

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

类似：

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

【讨论】：

我需要每两个相邻单元格之间的边距=1em。但是，如果两个细胞有不同的父母，他们之间的距离将是 2em、3em 等等......我是对的吗？我需要这个边距独立于父母的数量。
如果您仅将 JUST 单元格的边距设置为 0.5em，则相邻单元格将彼此相距 1em。
@IvanKuckir 我已经更新了答案:)
谢谢！当父 div 的边距 = 0 并且只有叶子有边距时，它可能会起作用。但我必须有 3 种容器（行、列、单元格）而不是 2。我对其进行了一些编辑jsfiddle.net/2z6nzxjr/1。有什么方法可以让 HTML 结构更简单？
@IvanKuckir 好吧，考虑到您想要做的事情，我认为它不会比这更简单，尽管我已经编辑了您的小提琴并注释掉了一些“div”：check out the fiddle。任何方式你都可以考虑使用像Masonry 这样的其他插件来获得你描述的效果:)