css - CSS浮动在下方和左侧

Question

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

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

顺便提一句：

我有解决方案：

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

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

谢谢您的帮助！

Answer 1

仅使用CSS来完成，

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

见演示

但我不确定浏览器支持。

它有点像你想要的，至少在某种程度上，但你可能会更好地使用 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 需要一些注意，但这是有可能的。