css - div float 或显示内联 block 到左侧和顶部

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 插件。我曾经用过 jq-masonry 并且对此非常满意。