Html 为什么CSS3列相互覆盖

我想使用css3列来创建水平布局

我有几个水平的内容组，它们之间应该有一定的间距，并且不应该打断新行

当我把几个css列相邻的元素放在一起时，一个组会覆盖另一个组（看起来它们有100%的宽度，而且它们不尊重内容的水平扩展）

...
...

这是小提琴：

预期结果： 下一个包含css列的组都位于上一个组之后

实际结果： 下一个组覆盖上一个组，就像它的宽度比实际宽度小一样

---

另外，我更希望找到解决方案，而不是解决方法，因为示例非常简单。

确定列化元素的宽度很难。我建议删除两个列化的

div

s并将所有内容移动到一个列化元素中，然后在

h2

元素之前强制中断，以使用

break before

属性获得所需的效果

h2 {
  -webkit-column-break-before: always;
  break-before: column;
}

---

下面是

尝试删除

空白：nowrapfrom.horizontal-groups-wrapper.Some color可以更好地说明问题：在更高级的水平布局中，不可能管理保存在一列中的内容。特别是当需要不同的列间距/宽度时。整个列规范在我看来还相当不完整。我曾尝试在项目中使用它，但不值得采取变通措施。有一些jQuery插件可以更好地完成这项工作。
h2 {
  -webkit-column-break-before: always;
  break-before: column;
}