堆栈div具有不同的高度

Question

我想在div容器中堆叠不同高度但宽度相同的div ..从上到下右移。

问题现在是div很短...给上面的div带来了一个难看的差距。

我添加了一个小草图，我想做什么..

感谢挪威！

Answer 1

我想你在你的网站上使用jQuery。从草图中我建议看一下名为Masonry的jQuery插件。

Answer 2

<强> CSS：

.column { width:20em; float:left }
.column div { background:red; margin:1em }

<强> HTML：

<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 3

看一下使用CSS Columns

以下是W3C spec，但稍微更容易阅读可能是PPK's write up。

Answer 4

在容器div中使用三个列div。每个漂浮都离开了。 在顶部和底部添加一个div，它是空的，并在两侧清除。

.column { 向左飘浮; 宽度：无论你想要什么; margin-left：你想要的任何东西; }

.clear { 明确：两者; 身高：0px; }

.column div { margin-bottom：无论你想要什么; 宽度：无论你想要什么; }

       <div id='container'>

<div class='clear'>&nbsp;</div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

  <div class='column'>
 <div>blah blah blah</div><div>blah blah blah</div>... etc
   </div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

<div class='clear'>&nbsp;</div>

       </div>