Css 在多栏布局中包含内容使用所有栏

我将CSS用于此布局：

我希望内容使用尽可能多的列。在上图中，它会这样做，但当只有3项时，它会执行以下操作：

我希望方框“3”位于方框“2”的右侧。有可能吗？

编辑：寻找通用解决方案（这是一个简化的示例，我们事先不知道容器或元素的高度）

编辑2：如果有比使用多列（也许是网格？）更好的方法，我们会使用它

以下是HTML/CSS（或JSFIDLE）：

.container{
列宽：120px；
柱间距：20px；
填充：10px；
宽度：600px；
高度：250px；
边框：1px纯蓝色；
}
.项目{
背景：2371f3；
填充物：5px；
高度：100px；
宽度：100px；
颜色：白色；
破门而入：避免；
/*Firefox bug的解决方法(https://stackoverflow.com/a/7785711/2223706) */
溢出：隐藏；
边框：1px实心深蓝色；
}
.更长{
高度：220px；/*将其降低到200px将使#2和#3不再堆叠*/
}

1.
2.
3.

如果元素的数量有限，您可以编写一些特定的CSS来执行此操作

.container{
列宽：120px；
柱间距：20px；
填充：10px；
宽度：600px；
高度：200px；
边框：1px纯蓝色；
}
.项目{
背景：2371f3；
填充物：5px；
高度：100px；
宽度：100px；
颜色：白色；
显示：内联块；
垂直对齐：顶部；
框大小：边框框；
溢出：隐藏；
边框：1px实心深蓝色；
}
/*我们添加一些底部边距来推动下一个元素*/
.项目：第n个最后一个孩子（2）：第n个孩子（偶数）：不是（：第n个孩子（6）），
.项目：第n个孩子（3）：第n个孩子（2），
.项目：第n个最后一个孩子（2）：第n个孩子（3）{
背景：红色；
页边距底部：5px；/*从1px到50px的任何值都可以完成此任务*/
}
/**/
.更长{
高度：200px；
}

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

在chrome中，您可以将其添加到样式表的末尾

.item:nth-child(n+3):last-child {
  background: #000;
  break-before: column;
}

如果你有3个项目，第3个项目移到右边，如果第4个项目进来，那么它回到第2个项目下面

如果你有5个项目，第5个项目向右移动，如果第六个项目进来，那么它会回到第4个项目之下

---

但是我不能让它在firefox上工作，我认为在mozilla上的列/中断兼容性仍然不是很好

基本上……不！为此，您必须定义列数。此外。。通过后端编程或JavaScript，可以根据特定类或元素类型等的数量来控制列布局，例如“解决方案”使用少量jQuery——更改

的高度。longer

强制

浮动

——定义列数似乎也没有帮助。在fiddle中，我修改了上述内容，添加了

列计数：3，但它仍然不想将内容传播出去。@Zak感谢这个例子，尽管在我们的用例中，我们不想修改框的高度，它还依赖于知道不同框的确切高度。非常聪明这很聪明！虽然它不适用于我们的使用情况，因为它也依赖于容器和具有特定高度的物品（或者更确切地说，高度是这样的，每列可以精确地容纳2个元素）。加勒特，我提供的解决方案不考虑高度。我使用marginbottom:50px作为radom值，即使是1px也可以。任何值都会起作用job@TemaniAfif，对不起，我应该附上小提琴来解释我的意思，我只修改了一个属性（将
.item
更新为
高度：60px；
），您可以看到它不再工作了。@Temaniaff，在说这个解决方案的上下文中，我是说“每列正好可以容纳2个元素”“不适用于我们的用例，因为它还依赖于容器和内部物品具有特定高度（或者更准确地说，高度是这样的，每个列正好可以容纳2个元素）“。因此，我们的用例不是每个列适合2个元素-我们事先不知道元素的高度。但是，当然，可能对其他人有用。谢谢你的回答，尽管这对我们的用例不起作用，因为它依赖于容器和里面的物品有特定的高度（或者更准确地说，高度是这样的，每列正好可以容纳2个元素）我建议你看看某种网格系统，而不是
column
，它目前还不太兼容所有浏览器，我想我们可以使用
grid
，因为我们不再支持IE，但也无法使用
grid
来解决这个问题。编辑问题，以反映我们对网格的开放性。您是否也能向我们提供各种情况下的输出结果？例如，如果项目2比项目1长，或者如果项目3比项目2长，如果容器或项目的宽度是标准的，如果有7个项目会发生什么？当然，我认为最好的描述方式是，就像多列布局一样，但它总是尝试使用所有列。如果有7个项目，它应该看起来像我问题中的第一张图片。