चिनाई शैली स्टाइल केवल सीएसएस

Question

जैसा कि आप छवि में देख सकते हैं प्रत्येक बॉक्स में एक अलग ऊंचाई है और डबल चौड़ाई वाले कुछ बक्से हैं।

यह केवल सीएसएस के साथ एक चिनाई शैली लेआउट बनाने के लिए संभव है?

Answer 1

css3 समर्थन के साथ आप यह कर सकता है: कोई css3 समर्थन के साथ

http://jsfiddle.net/huAxS/2/

.container { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 360px; 
} 

.container div { 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
}​ 

, आप दुर्भाग्य js का सहारा लेना है।

Answer 2

मैं एक ही प्रकार के लेआउट के साथ साइट पर काम कर रहा हूं, कभी-कभी दोहरे कॉल वाले बॉक्स के साथ दो कॉलम। मैं जो करता हूं वह शेष सामग्री से डबल-वाइड को अलग करता है। उदाहरण के लिए:

<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="double-wide"> 
</div> 
<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

तो फिर तुम CSS3 के स्तंभ समाधान सिर्फ two-columns वर्ग के लिए आवेदन कर सकते हैं। यदि आपको IE9 का समर्थन करने की आवश्यकता है तो आपको दुख की आवश्यकता होगी JavaScript fallback।