css - 如何让 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

之前有人问过类似的问题：float:left div's 的垂直对齐，尽管没有提出适当的解决方案。据我猜测，使用纯 CSS 来处理动态内容会很困难，所以我建议使用jQuery Masonry来完成这项任务。

对于纯 CSS 方法，我想它可以使用这里CSS3 columns解释的方法来完成。