Html 我可以用CSS实现元素的垂直换行吗？

我正在实现一个拖放系统来将元素传输到容器div。我希望这些传输的元素保持在一列中，直到它们达到容器的高度，然后“包装”到下一列，依此类推

遗憾的是，项目数量不会预先确定。实际上，我希望最终能够将元素包装到这种布局中：

…按照您在此处看到的顺序将元素加载到容器中

column count

属性是一个好主意，但它似乎在填充可用高度之前将内容传播到其他列。

您可以使用

.container{
宽度：200px；
高度：300px；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
.货柜组{
文本对齐：居中；
宽度：50px；
高度：50px；
背景：红色；
颜色：白色；
利润率：10px；
}

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

您可以使用flex，但需要设置容器的最大高度，可能需要使用javascript进行设置，因为您不知道列表的长度

您可以使用CSS列，而不需要事先知道项目的数量。缺点是缺乏对IE10及以下版本的支持

.container{
显示：块；
宽度：50%；
-webkit列数：3；
-moz列数：3；
列数：3；
柱间距：2米；
-webkit柱间距：2米；
-莫兹柱间距：2米；
}
.货柜组{
文本对齐：居中；
宽度：100%；
填充：2em 0；
背景#2980b9；
颜色：白色；
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
边缘底部：2米；
}

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

Flexbox在除IE之外的所有方面都非常有效，因此如果您支持IE，请务必测试它。如果您将容器中的项目设置为

display:inline

，则使用列计数也应该有效。尽管这可能取决于这些元素到底是什么。