फ्लोट: जहां संभव हो, उसी कॉलम को बाएं भरें

Question

मैं इस नियम के साथ कुछ divs रखने की कोशिश कर रहा हूं: जहां संभव हो वहां पहला कॉलम भरें, फिर (जब पहला कॉलम भरा हो) दूसरा कॉलम भरें, आदि (कृपया छवि देखें नीचे)

यह वह जगह है कि मैं क्या करना चाहते हैं: (पेंट के साथ बनाया)

ऊपर छवि में, जैसा कि आप देख सकते हैं, पहले कॉलम 1,2,3,4 है और पहले कॉलम में 5 डालने के लिए पर्याप्त लंबवत स्थान नहीं है। तो 5 दूसरे स्तंभ पर रखा जाना चाहिए ...

मैं float:left का उपयोग कर ऊपर की छवि की तरह कुछ बनाने की कोशिश की है, लेकिन इस परिणाम है:

कुछ कैसे बनाएं पहली छवि की तरह? मेरे वर्तमान कोड के साथ क्या गलत है (जो दूसरी छवि बनाता है)?

---

यह मेरा एचटीएमएल कोड है:

<div class="container"> 
<div class="i1">1</div> 
<div class="i1">2</div> 
<div class="i1">3</div> 
<div class="i1">4</div> 
<div class="i2">5</div> 
<div class="i3">6</div> 
<div class="i1">7</div> 
<div class="i1">8</div> 
</div> 

और ये मेरे सीएसएस है:

.container { 
    overflow:scroll; 
    width:10000px; 
    height:200px; 
    background:skyblue;  
    position:absolute; 
} 
.i1,.i2,.i3 { 
    float:left;  
    width:100px; 
    background:lime; 
    border-radius: 20px; 
    text-align:center; 
} 
.i1 { 
    height:33px; 
} 
.i2 { 
    height:66px; 
} 
.i3 { 
    height:100px; 
} 

Fiddle of my code

Answer 1

सिर्फ आधुनिक टैबलेट और स्मार्ट फ़ोन दिखाने इसे सही ढंग से

उस मामले में, CSS3 columns उपयोग करना चाहिए। browser support पर्याप्त होना चाहिए।

http://jsfiddle.net/thirtydot/AQ7bp/4/

.container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 

    -webkit-column-gap: 5px; 
    -moz-column-gap: 5px; 
    column-gap: 5px; 
} 
.i1,.i2,.i3 { 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 2

आप अतिरिक्त divs में स्तंभों को अलग करना होगा। फ्लोट बाएं क्षैतिज तत्वों को संरेखित करें, इसलिए वे वाक्यों में शब्दों की तरह व्यवहार करेंगे। Divs के प्रत्येक खंड को लपेटकर और रैपर को तैरने से आपके इच्छित प्रभाव उत्पन्न होता है, लेकिन केवल इस विशिष्ट मामले में। यदि यह अधिक गतिशील होना है, तो आपको अपने डिज़ाइन को फिर से सोचना पड़ सकता है।

HTML:

<div class="container"> 
    <div class="wrap"> 
     <div class="i1">1</div> 
     <div class="i1">2</div> 
     <div class="i1">3</div> 
     <div class="i1">4</div> 
    </div> 
    <div class="wrap"> 
     <div class="i2">5</div> 
     <div class="i3">6</div> 
    </div> 
    <div class="wrap"> 
     <div class="i1">7</div> 
     <div class="i1">8</div> 
    </div> 
</div>​ 

सीएसएस:

.container { 
    overflow:scroll; 
    width:10000px; 
    height:200px; 
    background:skyblue;  
    position:absolute; 
} 

.wrap 
{ 
    float: left; 
    width: 102px; 
} 

.i1,.i2,.i3 { 
    width:100px; 
    background: #000; 
    border-radius: 20px; 
    text-align:center; 
    color: #fff; 
} 
.i1 { 
    height:33px; 
} 
.i2 { 
    height:66px; 
} 
.i3 { 
    height:100px; 
}​ 

http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (। मैं रंग बदल क्योंकि वे मेरी आँखों चोट)

---

सवाल पर कुछ स्पष्टीकरण के बाद, यदि यह गतिशील रूप से ऊंचाई को स्थानांतरित करने के साथ पॉप्युलेट किया जाना चाहिए, फिर कोई समाधान नहीं है जो कुछ का उपयोग नहीं करता है पागल जावास्क्रिप्ट। आपको एक और डिजाइन के साथ आना होगा।

Answer 3

आप इसे flexbox के साथ काम कर सकते हैं। मैं आईओएस ब्राउज़र में समर्थन के बारे में निश्चित नहीं हूं लेकिन नए वेबकिट ब्राउज़र इसका समर्थन करते हैं, इसलिए यह एक लायक हो सकता है।

.container { 
    overflow:scroll; 
    width:10000px; 
    height:200px; 
    background:skyblue;  
    display: -webkit-flex; 
    -webkit-flex-flow: column wrap; 
}