इस तरह की छवियों की व्यवस्था कैसे करें?

Question

मैं नीचे दी गई तस्वीरों की तरह छवियों की व्यवस्था करने की कोशिश कर रहा हूं? मैं पहले से ही बाईं ओर तैरने की कोशिश कर रहा हूं, लेकिन यह नीचे चित्र के रूप में प्रदर्शित नहीं हुआ था।

Answer 1

सीएसएस यह नहीं कर सकते, तो आप जावास्क्रिप्ट की जरूरत है।

विशेष रूप से jQuery, और फिर jQuery Masonry।

वैकल्पिक रूप से, यदि आप कच्चे जावास्क्रिप्ट से चिपकना पसंद करते हैं, तो आप Vanilla Masonry का उपयोग कर सकते हैं।

छवियों पर एक नजर डालें डेमो: http://masonry.desandro.com/demos/images.html

Answer 2

शुद्ध सीएसएस, इंटरनेट एक्सप्लोरर, Fire Fox, और ओपेरा में परीक्षण किया:

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