विभिन्न ऊंचाइयों वाले तत्वों को कैसे फ़्लोट करें?

Question

मैं एक उत्तरदायी वेब डिज़ाइन पर काम कर रहा हूं जो कि 4 कॉलम में एक से अधिक आइटम तैरता है। उन वस्तुओं की अलग-अलग ऊंचाई होती है और इसलिए फ़्लोटिंग ठीक तरह से काम नहीं करती है।

floating wrong http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

कैसे तत्वों बनाने के लिए पर कोई भी विचार ऐसे ही नाव:

floating right http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

मुझे लगता है कि यह jQuery के साथ काम करना चाहिए "

यह वही समय होता है चिनाई ", है ना? हालांकि मैं Zepto.js के साथ काम कर रहा हूं और मुझे लगता है कि एक jQuery प्लगइन काम नहीं करेगा।

क्या कोई शुद्ध सीएसएस (CSS3) तरीका है? कुछ चाल या तो?

यदि यह शुद्ध सीएसएस के साथ या जे एस के साथ काम नहीं करेंगे यह संभव यह करने के लिए है: तत्वों 5, 6 और 7 के साथ

floating different http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

अब दूसरी पंक्ति "वास्तव में" नहीं चल रहा है जिस तरह से आप इसकी अपेक्षा करेंगे लेकिन अंदर एक छिपी रेखा-ब्रेक (स्पष्टफिक्स) है।

क्या शुद्ध सीएसएस के साथ इसका कोई तरीका है? जैसे के साथ लाइन-ब्रेक लागू करने के लिए nth-child(4n+4) और एक छद्म चयनकर्ता :after का उपयोग करें?

उस पर कोई विचार? उस काम को करने के लिए कोई चालाक चाल?

Answer 1

आप बाईं ओर सभी तरह से शुरू करने के लिए मजबूर करने के लिए हर पांचवें तत्व को स्पष्ट कर सकते हैं। मुझे लगता है कि यह css3 में कुछ इस तरह दिखेगा:

div#wrapper > *:nth-child(4n+1) { 
    clear: both; 
} 

jsFiddle demo

Answer 2

दूसरा विकल्प के लिए

, की instad "फ्लोट: छोड़ दिया" का उपयोग "display: inline-ब्लॉक", तुम भी साथ गठजोड़ कर सकते हैं कि एक पाठ-संरेखण: केंद्र हमेशा अंतिम पंक्ति

पहला विकल्प के लिए आप onw कंटेनर, 2 और 6 अन्य पर में 1 और 5 डाल सकता है को छोड़कर 100% भरने के लिए, और इसलिए एक है, तो आप उन कंटेनरों नाव

पिछले एक के लिए

Answer 3

, आप चार डब्ल्यू के प्रत्येक समूह को घेर सकते हैं एक कंटेनर के साथ। फिर कंटेनरों के अंदर divs को फ़्लोट करें, अगर आप इसे मैन्युअल रूप से नहीं करना चाहते हैं या नहीं कर सकते हैं, तो आप शायद जावास्क्रिप्ट के साथ आसानी से ऐसा कर सकते हैं।

Answer 4

जैसा कि @ एरियलजूड द्वारा उल्लिखित है, आप float के बजाय display: inline-block का उपयोग कर सकते हैं। इस का सौंदर्य यह है कि यह (सहित नीचे हैक साथ IE7 +) सभी ब्राउज़रों में काम करेंगे और पूरी तरह से तरल पदार्थ है:

div { 
    ... 
    display: inline-block; 
    vertical-align: top; 
    margin-bottom: 0.3em; 
    *display: inline; 
    *margin-right: 0.3em; 
    *zoom: 1; 
    ... 
} 

कार्य उदाहरण: http://jsfiddle.net/cRKpD/1/

Answer 5

पहले विकल्प

CSS multi-column layout, एक बार यह पर्याप्त रूप से मानकीकृत और समर्थित होने के बाद, ऐसा करने के लिए एक लचीला तरीका प्रदान कर सकता है।

एकमात्र अन्य सीएसएस समाधान जो दिमाग में आता है, हालांकि यह पर्याप्त रूप से उत्तरदायी नहीं हो सकता है, कॉलम कंटेनर (1 और 5, फिर 2 और 6, फिर 3 और 7, फिर 4) में तत्वों को समूहित करना है।

उन दो विकल्पों के अलावा, मुझे विश्वास है कि जेएस की आवश्यकता है।

Answer 6

थोड़ा देर हो चुकी है लेकिन एक अतिरिक्त विभाजक में 1 डाल दें। फिर उस विभाजक में 7 डालें (आपको विभाजक को समायोजित करना होगा ताकि 7 नीचे 1 दिखाई दे)। अतिप्रवाह का उपयोग करने के लिए उपयोगी हो सकता है: इस विभक्त में दिखाई दे रहा है।

Answer 7

मैं जानता हूँ कि मैं पार्टी के लिए देर हो रही है, लेकिन किसी को सिर्फ एक और इसी तरह से एक के लिए इस सवाल का जुड़ा हुआ है और मुझे एहसास हुआ कि यह एक याद करते हैं flexbox समाधान ...
(जो जब चारों ओर प्रश्न पूछा गया था नहीं था)।

वांछित विक्रेता उपसर्गों जोड़ें और अपने सीएसएस

.parent { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: -moz-box; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
    -webkit-flex-flow: row wrap; 
     -ms-flex-flow: row wrap; 
      flex-flow: row wrap; 
} 

example