css - 我怎样才能让 div 漂浮在彼此的旁边和下面？

Question

http://oi49.tinypic.com/2qithg4.jpg (示例是 jpg img)

如您在示例中所见；盒子( float 后)在其下方有一个空白区域，以便为相等行的 div 腾出空间但我想将它们全部 float 以填补空白。有什么建议吗？

这就是我想做的(示例是 jpg img)

http://oi47.tinypic.com/2nixr2x.jpg

提前致谢。

编辑//向亚历克斯展示一些代码:)

HTML

<div id="content">
<div id="featured"></div>
<div class="box"></div>
<div class="box"></div>
<div style="width:310px; height:18px; margin:0 0 10px; padding:98px 0; text-align:center; float:left; display: block; background: #ffffcc;">Ad Space</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

#content { }
#featured { width:630px; float:right; height:214px; margin:0 10px 10px 0; }
.box { float:left; width:310px; margin:0 10px 10px 0; height:400px; }

Answer 1

之前有人问过类似的问题:Vertical alignment of float:left div's , 尽管没有提出适当的解决方案。据我猜测用纯 CSS 来实现动态内容会很困难，所以我建议使用 jQuery Masonry为了这个任务。

对于纯 CSS 方法，我想可以使用 CSS3 列 来完成，如 here 所解释的那样.