Cách sắp xếp hình ảnh như thế này?

Question

Tôi đang cố gắng sắp xếp các hình ảnh như hình dưới đây? Tôi đã cố gắng nổi bên trái, nhưng nó không hiển thị như hình dưới đây.

Answer 1

CSS không thể làm điều đó, bạn cần JavaScript.

Cụ thể jQuery, sau đó jQuery Masonry.

Hoặc, nếu bạn muốn sử dụng JavaScript thô, bạn có thể sử dụng Vanilla Masonry.

Hãy nhìn vào những hình ảnh giới thiệu: http://masonry.desandro.com/demos/images.html

Answer 2

CSS tinh khiết, được thử nghiệm trong Internet Explorer, Fire Fox, và 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>