이런 이미지를 정리하는 방법?

Question

아래 그림과 같은 이미지를 정렬하려고합니까? 나는 이미 왼쪽 플로트를 시도했지만 아래 그림과 같이 표시되지 않았습니다.

Answer 1

CSS 그것을 할 수 없습니다, 당신은 자바 스크립트가 필요합니다.

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