このような画像の配置方法は？

Question

私は下の画像のような画像を手配しようとしていますか？私はすでにフロートを左にしようとしていますが、下の写真では表示されませんでした。

Answer 1

CSSはそれを行うことはできません、あなたはJavaScriptを必要とします。

特にjQuery、次にjQuery Masonry。

また、生のJavaScriptを使用する場合は、Vanilla Masonryを使用できます。

画像を見ては、デモ：インターネットエクスプローラ、ファイアーフォックス、オペラでテストhttp://masonry.desandro.com/demos/images.html

Answer 2

ピュアCSSを、：

<style type="text/css"> 
    /*<![CDATA[*/ 
    .A { 
     float: left; 
     margin: 0px 6px 0px 0px; 
    } 
    .A1 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 74px; 
     margin: 0px 0px 6px 0px; 
    } 
    .A2 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 83px; 
     clear: left; 
    } 

    .B { 
     float: left; 
     margin: 0px 6px 0px 0px; 
    } 
    .B1 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 47px; 
     margin: 0px 0px 6px 0px; 
    } 
    .B2 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 126px; 
     clear: left; 
    } 

    .C { 
     float: left; 
     margin: 0px 6px 0px 0px; 
    } 
    .C1 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 107px; 
     margin: 0px 0px 6px 0px; 
    } 
    .C2 { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 49px; 
     clear: left; 
    } 

    .D { 
     float: left; 
     margin: 0px 6px 0px 0px; 
    } 
    .D1 { 
     border: 1px solid black; 
     float: left; 
     width: 316px; 
     height: 60px; 
     margin: 0px 0px 6px 0px; 
    } 
    .D2 { 

    } 
    .D2A { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 86px; 
     clear: left; 
     margin: 0px 6px 6px 0px; 
    } 
    .D2B { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 116px; 
     margin: 0px 6px 6px 0px; 
    } 
    .D2C { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 131px; 
     margin: 0px 0px 6px 0px; 
    } 

    .E { 
     border: 1px solid black; 
     float: left; 
     width: 100px; 
     height: 202px; 
    } 
    /*]]>*/ 
</style> 

<div class="A"> 
    <div class="A1"> 
    A1 
    </div> 
    <div class="A2"> 
    A2 
    </div> 
</div> 
<div class="B"> 
    <div class="B1"> 
    B1 
    </div> 
    <div class="B2"> 
    B2 
    </div> 
</div> 
<div class="C"> 
    <div class="C1"> 
    C1 
    </div> 
    <div class="C2"> 
    C2 
    </div> 
</div> 
<div class="D"> 
    <div class="D1"> 
    D1 
    </div> 
    <div class="D2"> 
    <div class="D2A"> 
     D2 
    </div> 
    <div class="D2B"> 
     D3 
    </div> 
    <div class="D2C"> 
     D4 
    </div> 
    </div> 
</div> 
<div class="E"> 
    E 
</div>