具有左右流的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

---

在一些类似的问题上，我被问到了，但我对答案不满意，而且它对不同高度的元素也不起作用。对于CSS列，这是可能的，还是一种限制？

多列规范没有提供更改列之间元素分布的属性：。这样的属性似乎与模块的设计目的背道而驰（重新创建报纸或杂志文章的布局）

---

其他任何纯CSS解决方案都不允许您实现所需的效果。

如果您的布局总是3列宽，您可以尝试在内部div上使用

n

选择器。
您可以通过清除第4项来完成此操作

#容器{
溢出：隐藏；
宽度：440px；
}
#货柜组{
背景颜色：灰色；
宽度：110px；
保证金：5px；
浮动：左；
}
#容器分区：第n个子（4）{
明确：两者皆有；
}

1.
2.
3.
4.
5.
6.
7.
8.

您可以使用jQuery重新排列列中的项目。如果是2列，则为：

$('.your-columns-container .your-item:nth-child(even)').appendTo('.your-columns-container');

还有更复杂的3列：

$('.your-columns-container .your-item:nth-child(3n - 1)').addClass('container-col2');
$('.your-columns-container .your-item:nth-child(3n)').addClass('container-col3');

$('.container-col2').appendTo('.your-columns-container').removeClass('container-col2');
$('.container-col3').appendTo('.your-columns-container').removeClass('container-col3');

这是解决方案！只使用flex

html

---

有一种仅使用CSS的解决方案，它使用了

flexbox

，

：nth-child（）

，以及

顺序

，如本文所述

这个想法很简单<代码>弹性流：列与

换行

可以精确执行

列计数

的功能。你需要两个条件才能让它工作：1。flexbox容器需要有一个固定的高度，并且需要比最高的柱高。2.Flex儿童需要宽度，2列布局需要50%，3列布局需要33%，等等

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 600px; /* You'll need to play with this value to distribute items correctly */
}

.flex-child {
  width: 33%; /* Creates 3-column layout */
}

这种方法与

列计数

的问题相同：元素是按列自上而下排序的。但是由于我们使用flexbox，现在我们可以访问

order

属性

使用

：nth-child（）

和

顺序

可以覆盖默认顺序

.flex-child:nth-child(3n+1) { order: 1; }
.flex-child:nth-child(3n+2) { order: 2; }
.flex-child:nth-child(3n)   { order: 3; }

带有

顺序：1

的项目将位于第一列，

顺序：2

的项目将位于第二列，

顺序：3

的项目将位于第三列

在

（a+b）

公式

a

表示循环大小，

n

是计数器（从0开始），而

b

是偏移值。所以

（3n+1）

每三个项目选择一个，从第一个开始<代码>（3n+2）每三个项目选择一个，但从第二个项目开始。并且

（3n）

选择以

第三个
项开始的每三个项，因为索引0处没有任何内容

在某些布局中，列可能会合并。为了解决此问题，Tobias在列之间插入伪元素：

/* Force new columns */
.flex-container::before,
.flex-container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

我不会解释这是怎么回事，但你可以

这是Tobias的一篇关于3列布局的文章。如果您使用的是三个以上的列，.
如果我正确理解OP的问题（特别是因为他们表示希望使用CSS重新创建砖石结构），问题在于元素2的高度会导致元素1和4以及元素3和6之间出现不吸引人的间隙。列给出了他们想要的效果，只是顺序不对。@cimmanon你是对的。我不明白这个问题。我会留着它，以防万一，它对其他人来说是一个可行的选择。我将关注未来可能出现的任何答案。很好的答案…谢谢！这就是我所怀疑的。。。我将保留我的javascript实现，并且只有在未启用javascript的情况下才回退到CSS，用户将看到图片之间的一些间隙，这将是一种折衷。谢谢你的确认！欢迎来到堆栈溢出。对于堆栈溢出，不鼓励使用仅代码的答案，因为它们没有解释堆栈溢出是如何解决问题的。请编辑您的答案，解释此代码的作用以及它如何回答问题，以便对其他有类似问题的用户有用。
.flex-child:nth-child(3n+1) { order: 1; }
.flex-child:nth-child(3n+2) { order: 2; }
.flex-child:nth-child(3n)   { order: 3; }

/* Force new columns */
.flex-container::before,
.flex-container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}