为什么CSS3列互相覆盖

Question

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

我有几个水平的内容组，彼此之间应该有一些间距，它们不应该分成新的一行。

当我将几个css列彼此相邻的元素放在一起时，那么一个组覆盖另一个（看起来它们有100％的宽度，并且它们不按内容尊重它们的水平扩展）

<div class="horizontal-groups-wrapper">
    <div class="horizontal-group">...</div>
    <div class="horizontal-group">...</div>
</div>

这里是小提琴：

http://jsfiddle.net/fee2G/1/

预期结果： 具有css列的每个下一组在前一组

之后很好地放置

实际结果： 每个下一个组都会覆盖之前的组，因为它的宽度将比实际宽度小。

PS。我宁愿找到解决方案，也不想解决方法，因为示例非常简单。

Answer 1

确定列化元素的宽度很难。我建议删除两个列div并将所有内容移动到一个列化元素中，然后在h2元素之前强制中断以使用break-before属性获得所需效果

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

这里是 demo 。