假设我有一个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列来说是否可行,或者它是一个限制？