CSS浮动在下方和左侧

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;
}

Answer 2

解决此问题的另一种方法是使用 jQuery 获取可用的窗口高度并根据此信息创建每一列。换句话说，但仍然使用 jQuery，您是使用 Mansory jQuery (http://masonry.desandro.com/) 插件还是同位素 (http://isotope.metafizzy.co/)。

Answer 3

试试这样的： 其中 maxHeight 正好等于窗口的高度。

<style type="text/css">
.maxHeight {
  display:inline-table;
  height:600px;
  width:50px;
  float:left;
  background-color:#09F;
  margin:3px;
}
.box {
  display:inline-block;
  height:50px;
  width:50px;
  background-color:#33F;
  margin:2px;
}
</style>


<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

循环使用的 Javascript 需要注意，但很有可能。