堆叠具有不同高度的div

如何解决堆叠具有不同高度的div

| 我想在div容器中堆叠高度不同但宽度相同的div。 现在的问题是与div短..给上面的div一个难看的差距。 我已经添加了一个小草图，我想要做什么。 感谢挪威！     

解决方法

我想您正在网站上使用jQuery。从草图中，我建议看一下名为Masonry的jQuery插件。     ,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>

    ,看看使用CSS列 这是W3C规范，但稍为容易阅读的可能是PPK的写法。     ,在容器div中使用三列div。每个浮向左。 在顶部和底部添加一个div，该div为空并在两侧清除。 .column { 向左飘浮; 宽度：您想要的宽度； 左边距：无论您想要什么； } 。明确{ 清楚的 高度：0px； } .column div { 底边距：无论您想要什么； 宽度：您想要的宽度； }

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