css - パズルのようなCSSdivアライメント

Question

私はこれらのdivをパズルのようにスロットに入れようとしています。div4をdiv1と3の間に配置したいと思います。現在、div4はdiv3の下から始まります。解決策は何ですか。divが互いに「スロット」するようにします。

<div style='overflow:hidden;width:500px;'>
            <div style='float:left;width:200px;height:400px;border:1px solid #707070'>1</div>
            <div style='float:left;width:200px;height:300px;border:1px solid #707070'>2</div>
            <div style='float:left;width:200px;height:400px;border:1px solid #707070'>3</div>
            <div style='float:left;width:200px;height:300px;border:1px solid #707070'>4</div>
            </div>

絶対位置は使いたくない。これは単なる例です。実際のコードはループ内にあり、コンテンツサイズは動的です。

Answer 1

JQueryMasorny。CSSだけでは、これを動的に実行するほど強力ではありません。