我如何让div漂浮在旁边？彼此打倒？

Question

http://oi49.tinypic.com/2qithg4.jpg （示例是jpg img）

正如您在示例中看到的那样;盒子（浮动后）在它下面有一个白色空间，以便为一排相同的div腾出空间 但是我想把所有的人都浮起来填补空白......有什么建议吗？

这就是我想做的事情（例如jpg img）

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

提前致谢。

编辑//向Alex展示一些代码：）

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 columns进行here解释。