如何在两列中均匀显示动态内容？

Question

我在页面上加载了动态内容，因此未指定数量的元素。我需要将它们均匀地分布在两列之间，所以我认为将它们的宽度设置为 50% 并将它们向左浮动就可以了。

<div class="element">
    <p>My content goes here!</p>
</div>

.element{float:left;width:50%;}

但是在我的示例中的情况下，蓝色元素上方存在间隙，因为右侧元素比左侧第一个元素高。对此的推荐解决方案是什么？我假设这是一个普遍的问题？

我不想在 CSS 中创建实际的列，因为内容是动态的，元素可以非常高/短，所以在左侧放置 5 和在右侧放置 5 并不总是有效。

Answer 1

根据您希望的浏览器支持，也许 CSS 列是一种解决方案？

body {
    column-count: 2;
}

.element {
    break-inside: avoid;
}