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

Question

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

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

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

一个例子: https://jsfiddle.net/fft75mu4/

但在我的例子中，蓝色元素上方有一个空隙，因为右边的元素比第一个左边的元素高。为此推荐的解决方案是什么？我假设这是一个常见问题？

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

Answer 1

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

http://caniuse.com/#feat=multicolumn

body {
    column-count: 2;
}

.element {
    break-inside: avoid;
}

https://jsfiddle.net/erykpiast/fft75mu4/11/