具有左右流的CSS列

Question

假设我有一个div包含一组元素(div)的元素,它们可能具有不同的高度,但它们都具有相同的宽度.

我目前用同位素+砌体实现了这一点,但由于一些浏览器已经支持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多列元素中,在自上而下之前左右会出现类似的问题,但是我对答案不满意,并且它不适用于不同高度的元素.这对CSS列来说是否可行,或者它是一个限制？

Answer 1

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

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

Answer 2

如果您的布局总是3列宽,您可以尝试nth在内部div上使用选择器.
您可以通过清除第4项来完成此操作.

#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
    <div id="widget7">8</div>
</div>

JS小提琴