堆叠不同高度的div
Posted
技术标签:
【中文标题】堆叠不同高度的div【英文标题】：Stack divs with different heights 【发布时间】：2011-09-02 03:57:59 【问题描述】：我想在一个 div 容器中堆叠高度不同但宽度相同的 div。从上到下向右。
现在的问题是 div 太短了.. 给上面的 div 带来了丑陋的差距。
我添加了一个我想做的小草图..
来自挪威的感谢！
【问题讨论】：
【参考方案1】：我想你在你的网站上使用了 jQuery。从草图中我建议看一下名为 Masonry 的 jQuery 插件。
【讨论】：
Bakudan：我只能说哇！这是我一直在寻找的东西！完美，特别是masonry.desandro.com/demos/images.html 的图像解决方案。十分感谢！这就是我喜欢 *** 的原因 :) 漂亮的解决方案。【参考方案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'> </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'> </div>
</div>
【讨论】：
以上是关于堆叠不同高度的div的主要内容，如果未能解决你的问题，请参考以下文章