具有左右流动的 CSS 列

Question

假设我有一个 div，它将包含一组元素 (divs)，这些元素可能具有不同的高度，但它们都具有相同的宽度。

目前我已经使用 isotope + masonry 实现了这一点，但由于一些浏览器已经支持 CSS3 多列，我希望为这些浏览器提供一个纯 CSS 解决方案，其余的回退到 Javascript。

这是我一直在尝试的 CSS:

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

然而，这使得元素的流动是自上而下的左右。我想要一个左右自上而下的流程。这是我想要的示例:

1 2 3
4 5 6
7 8 9

但这就是我得到的:

1 4 7
2 5 8
3 6 9

在Flow multi-column elements left-right before top-down有人问了类似的问题，但我对答案不满意，而且它不适用于不同高度的元素。这对 CSS 列来说完全可能吗，还是一个限制？

Answer 1

多列规范没有提供改变列中元素分布的属性:http://www.w3.org/TR/css3-multicol/ .这样的属性似乎违背了模块的设计目的(重新创建报纸或杂志文章的布局方式)。

没有其他纯 CSS 解决方案可以让您实现您正在寻找的效果。