स्थिति एक दूसरे के नीचे सीधे चलने वाले तत्व

Question

मैं अगली पंक्ति में एक-दूसरे के बगल में टॉव divs की एक पंक्ति प्रदर्शित करना चाहता हूं, अगला div सीधे अंतिम के नीचे बैठता है। इस तरह:

क्योंकि लेआउट एक सीएमएस में बनाया जाना है, मुझे नहीं बॉक्स 1,3 और 2,4 एक separat div में डाल सकते हैं। अतिरिक्त लपेटने वाले तत्वों के बिना इस तरह के व्यवहार को प्राप्त करने का कोई तरीका है? (सामान्य फ्लोट व्यवहार काम नहीं करता है, इनलाइन/इनलाइन-ब्लॉक प्रदर्शित करता है यह चाल भी नहीं करता है।) या कुछ जावास्क्रिप्ट को इस तरह का लेआउट बनाने की आवश्यकता है?

Answer 1

विभिन्न ऊंचाइयों की वजह से, यह ऐसी समस्या की तरह दिखता है जहां मुझे अभी भी वास्तव में कठिन की कोशिश करने के बावजूद इसे ठीक से संभालने के लिए सामान्य उद्देश्य शुद्ध सीएसएस तकनीक नहीं मिली है।

मैं इस उत्तर भेजा है से पहले: css alignment question

मैं छोड़ दिया और कुछ समान के लिए एक jQuery प्लगइन इस्तेमाल किया अतीत में यह करने के लिए किया है:

jQuery Masonry

एक तस्वीर हजारों शब्दों के लायक है:

Answer 2

आप nth-child(odd) से clearfloat:left; का उपयोग कर सकते हैं।

सीएसएस

.box {height:100px;width:100px;float:left;} 
.box:nth-child(odd) {clear:left;} 
.green {background:green;} 
.red{background:red;} 
.blue {background:blue;} 
.yellow {background:yellow;} 

एचटीएमएल

<div class="box green">BOX 1</div> 
<div class="box red">BOX 2</div> 
<div class="box blue">BOX 3</div> 
<div class="box yellow">BOX 4</div> 

डेमो:http://jsfiddle.net/YSP2S/

ध्यान रखें कि यह इंटरनेट एक्सप्लोरर के लिए काम नहीं करेगी। आप इंटरनेट एक्सप्लोरर के लिए इसे प्राप्त करने के लिए conditional comment और जावास्क्रिप्ट का भी उपयोग कर सकते हैं।