सीएसएस:

Question

फ़्लोट करते समय divs ऊंचाई को अनदेखा कर रहा हूं, मैं कुछ चित्रों को प्रदर्शित करने की कोशिश कर रहा हूं। उनमें से सभी की एक ही चौड़ाई लेकिन अलग ऊंचाई है। हर तस्वीर के वर्ग के नाम पिक

<img class = "pic" src = .... /> 

स्टाइलशीट मैं नाव निर्दिष्ट में है

: मैं की तरह कुछ करने के लिए कोशिश कर रहा हूँ बाईं विशेषता:

.pic{ 
    float:left 
} 

अंत नतीजा यह उम्मीद नहीं है कि प्रत्येक पंक्ति को पहले से पंक्ति से उच्चतम div के बाद लंबवत रूप से गठबंधन किया गया है:

क्या शुद्ध क्रॉस ब्राउज़र सीएसएस में मेरी समस्या का समाधान करने का कोई तरीका है?

Answer 1

आप इसे कम से कम एक तत्व युक्त मानते हुए, CSS3 column-count के साथ कोई अतिरिक्त मार्कअप के साथ ऐसा कर सकते हैं।

डेमो: http://jsfiddle.net/ThinkingStiff/NcxPr/

HTML:

<div id="container"> 
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" /> 
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" /> 
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" /> 
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" /> 
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" /> 
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" /> 
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" /> 
</div> 

सीएसएस:

#container { 
    column-count: 3; 
    column-fill: balance; 
    column-gap: 10px; 
    width: 330px; 
} 

.image { 
    display: block; 
    margin-bottom: 10px; 
    width: 100px; 
} 

आउटपुट:

Answer 2

अफसोस की बात है, आप इसे सीएसएस 2/3 के साथ नहीं कर सकते हैं।

वहाँ jQuery Masonry, एक काफी छोटे स्क्रिप्ट float: top; emulates और अच्छी तरह से काम करता है।

Answer 3

क्या आप कुछ अतिरिक्त मार्कअप जोड़ सकते हैं?

यदि हाँ, आप अस्थायी divs के साथ 3 कॉलम बना सकता है:

<div class="column"> 
    <img src="1.jpg" /> 
    <img src="4.jpg" /> 
</div> 

<div class="column"> 
    <img src="2.jpg" /> 
    <img src="5.jpg" /> 
</div> 

<div class="column"> 
    <img src="3.jpg" /> 
    <img src="6.jpg" /> 
</div> 

या बस jQuery का उपयोग करने के लिए है कि आप के लिए।