堆叠不同高度的div答案

【问题标题】：Stack divs with different heights堆叠不同高度的div
【发布时间】：2011-09-02 03:57:59
【问题描述】：

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

现在的问题是 div 太短了.. 给上面的 div 带来了丑陋的差距。

我添加了一个我想做的小草图..

来自挪威的感谢！

【问题讨论】：

标签： html layer

【解决方案1】：

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

【讨论】：

Bakudan：我只能说哇！这是我一直在寻找的东西！完美，特别是masonry.desandro.com/demos/images.html 的图像解决方案。十分感谢！这就是我喜欢 stackoverflow 的原因 :) 漂亮的解决方案。

【解决方案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>

【讨论】：

【解决方案3】：

看看如何使用 CSS 列

这里是W3C spec，但更容易阅读的可能是PPK's write up。

【讨论】：

【解决方案4】：

在容器 div 中使用三列 div。每个都向左浮动。在顶部和底部添加一个空的 div 并且两边都清除。

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

.clear{ 明确：两者；高度：0px； }

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

【讨论】：