堆叠具有不同高度的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>
    

要回复问题请先登录注册