html - 具有特定位置/顺序的 CSS 列构建

我找不到任何答案，也不知道这是否可能。我想制作 2 列，其中项目的顺序从开始column1，如果开始溢出，则项目显示column2如下：

column1     column2
item1       item6
item2       item7
item3
item4
item5

项目的数量每次都不同，可以是 3 个，可以是 7 个，可以是 10 个。它们是生成的，每个项目也可以有不同的高度。

所以我不能使用float，因为这会破坏秩序，我不能使用nthchild和定位它们，因为物品的高度不同，如果物品 5 导致溢出，它应该降落在column2.

它必须在需要新列时进行识别和衡量。

所以只是再次澄清一下。假设父 div 的高度为 200px，每个项目的高度为 40px。这意味着 5 个项目可以放入column1，其余的进入column2，但是当 item3 为 80px 时，这意味着 item5 不再适合，因此应该移动到column2.

我希望你明白我想做什么，我希望你能帮助我。

最好只使用 CSS，但也欢迎使用 jQuery。

标签： htmlcss