CSS列具有左右流 [英] CSS columns with left-right flow

问题描述

假设我有一个 div ，它将包含一组元素（divs），它们可以有不同的高度，但是它们都将有相同的宽度。 / p>

我目前使用isotope + masonry实现了这一点，但是由于一些浏览器已经支持CSS3多列，我希望这些浏览器只有一个CSS解决方案，

这是我一直在尝试的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 
  

在流多列元素左右前自顶向下之类的问题，但我不满意的答案，它不会工作与不同高度的元素。这是可能的CSS列，或者是一个限制？

解决方案

多列规范不提供属性更改在列之间的元素分布： http://www.w3.org/TR/css3-多元/ 。这样的属性似乎违背了模块的设计目的（重新创建报纸或杂志文章的布局）。

其他纯CSS解决方案都不允许以实现您正在寻找的效果。

Let's say I have a div which will contain a set of elements (divs), which may have different heights, but all of them will have the same width.

I've achieved this currently with isotope + masonry, but since some browsers already support CSS3 multi-columns, I was hoping to have a only-CSS solution for these browsers, falling back to Javascript for the rest.

This is the CSS I've been trying:

.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;
}

However, this makes the flow of the elements to be top-down left-right. I'd like instead a left-right top-down flow. This is an example of what I'd like:

1 2 3
4 5 6
7 8 9

But this is what I get:

1 4 7
2 5 8
3 6 9

In Flow multi-column elements left-right before top-down something similar is asked, but I'm not satisfied with the answer, and it won't work with elements of different height. Is this possible at all with CSS columns, or is it a limitation?

解决方案

The multi-column specification offers no property to change the distribution of elements among the columns: http://www.w3.org/TR/css3-multicol/. Such a property seems to go against what the module was designed for (recreating how newspaper or magazine articles are laid out).

None of the other pure CSS solutions will allow you to achieve the effect you are looking for.

这篇关于CSS列具有左右流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！