为什么 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

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

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

这里是 demo。