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;
}​

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

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

我该怎么做？有没有类似“浮动：左上方”的东西？

Answer 1

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

更新

随着Flexbox的蓬勃发展（在所有主流浏览器中都得到支持），对于我们这些大胆的人来说，最后一个简单的解决方案就是不要害怕让IE8 / IE9不受支持！

的 Flexbox - Guide

的 Flexbox - Support

如果这是一个非常需要的功能而你现在需要它，我建议你使用一个js-plugin来为你做这个。我曾经使用 jq-masonry ，对此非常满意。