带左右流的CSS列

前端之家收集整理的这篇文章主要介绍了带左右流的CSS列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有一个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 multi-column elements left-right before top-down年中,类似的问题被问到,但我对答案不满意,它不会与不同高度的元素一起工作。 CSS列可能是可能的,还是限制?

解决方法

多列规范没有任何属性可以更改列之间的元素分布: http://www.w3.org/TR/css3-multicol/.这样的属性似乎违反了模块设计(重新创建报纸或杂志文章的方式)。

没有其他纯CSS解决方案将允许您实现您正在寻找的效果

猜你在找的CSS相关文章