Javascript 如果存在'；有足够的空间吗？

假设我有8个div。如果有足够的空间（通过

minwidth

），我希望将它们分成两列，如下所示：

但是，如果我只是简单地设置

显示：内联块

，它们就会像这样被拆分，这不是我想要的：

 1  2
 3  4
 5  6
 7  8

理想情况下，我正在寻找一种允许大小不等的解决方案，因此，如果只有6个，但#1和#2是双倍高度，结果如下所示：

1  3
1  4
2  5
2  6

---

这在纯CSS中可能吗？或者，如果没有，如何在JS中实现这一点？

您可以使用CSS列来实现此行为：

html{
字体大小：62.5%；
}
.分区{
显示：内联块；
宽度：100%；
高度：10雷姆；
颜色：#fff；
文本对齐：居中；
字体大小：5rem；
线高：10雷姆；
背景色：#4caf50；
边缘底部：0.5雷姆；
}
.包装纸{
-webkit列数：2；
-moz列数：2；
列数：2；
-webkit柱间距：0.5雷姆；
-莫兹柱间距：0.5雷姆；
柱间距：0.5雷姆；
宽度：20%；
保证金：0自动；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.包装纸{
-webkit列计数：1；
-moz列数：1；
列数：1；
}
}

12345678

您可以使用CSS列来实现此行为：

html{
字体大小：62.5%；
}
.分区{
显示：内联块；
宽度：100%；
高度：10雷姆；
颜色：#fff；
文本对齐：居中；
字体大小：5rem；
线高：10雷姆；
背景色：#4caf50；
边缘底部：0.5雷姆；
}
.包装纸{
-webkit列数：2；
-moz列数：2；
列数：2；
-webkit柱间距：0.5雷姆；
-莫兹柱间距：0.5雷姆；
柱间距：0.5雷姆；
宽度：20%；
保证金：0自动；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.包装纸{
-webkit列计数：1；
-moz列数：1；
列数：1；
}
}

12345678

1  3
1  4
2  5
2  6