CSS float 在下方和左侧

Question

我有很多高度可变的 div。我需要这些 div 相互排序，但是当它们到达窗口的末尾时 –> 创建新的“列”。

现在 div 溢出了，但我需要创建新的“列”。

顺便说一句:

我有解决方案:

-webkit-column-gap: 16px;
-webkit-column-width: 230px;

但我需要支持其他浏览器。

感谢您的帮助!

Answer 1

要使用仅使用 CSS，

一个选项是在容器上使用 column-count 和 max-height。

参见 DEMO

但我不确定浏览器的支持情况。

它有点像你想要的那样，至少在某种程度上，但你可能会更好地使用 javascript 中的东西。

编辑:我在这里粘贴 CSS:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}