css - div float または inline-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-plugin を使用することをお勧めします。私はかつてjq-masonryを使用していましたが、非常に満足していました。