如何安排像這樣的圖像？

Question

我正在嘗試安排下面的圖片嗎？我已經嘗試向左浮動，但它沒有顯示如下圖所示。

Answer 1

CSS不能做到這一點，你需要的JavaScript。

具體爲jQuery，然後jQuery Masonry。

或者，如果您希望堅持原始JavaScript，則可以使用Vanilla Masonry。

看一看圖像演示：http://masonry.desandro.com/demos/images.html

Answer 2

純CSS，在Internet Explorer，火狐和Opera測試：

<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>