css - div 浮动或向左和顶部显示内联块

Question

我在 div 中有这样的动态数据：http: //jsfiddle.net/rvWzr/

<div class="container">
<div style="width:200px;height:100px;">1</div>           
<div style="width:200px;height:300px;">2</div> 
<div style="width:200px;height:140px;">3</div> 
<div style="width:200px;height:210px;">4</div> 
<div style="width:200px;height:140px;">5</div> 
<div style="width:200px;height:120px;">6</div> 
</div>​

.container div{
display:inline-block;
border:1px solid black;
margin:0px 0px 20px 20px;
}​

在我的屏幕上，它看起来像这样：

但我希望它看起来像这样，以免浪费空间：

我怎样才能做到这一点？有没有像“float:left top;”这样的东西？

Answer 1

不幸的是，此功能不存在。您可以将代码重写为列，但我担心这在调整大小时不够健壮。

更新

随着 Flexbox 的兴起（所有主流浏览器都支持），终于有一个简单的解决方案可以满足我们中那些不怕 IE8/IE9 不受支持的大胆人士的需求！

Flexbox - Guide

Flexbox - Support

如果它是一个急需的功能并且您现在需要它，我建议您使用为您执行此操作的 js-plugin。我曾经使用过jq-masonry并且对它非常满意。