CSS漂浮在左下方

Question

我有很多高度可变的div。我需要这些div在彼此之间进行排序，但是当它们到达窗口的末尾时 - ＆gt;创建新的“专栏”。

现在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/）插件还是Isotope（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需要一点注意，但这很有可能。