float: lewy wypełnij tę samą kolumnę, gdzie to możliwe

Question

Próbuję umieścić kilka elementów div, z tą zasadą: Wypełnij pierwszą kolumnę tam, gdzie to możliwe, a następnie (gdy pierwsza kolumna jest pełna) wypełnij drugą kolumnę itp. (Proszę zobaczyć obraz poniżej)

to jest to, co chcę mieć! (utworzona z farbą)

W powyższym obrazie, jak widać, pierwsza kolumna ma 1,2,3,4 i nie ma wystarczająco dużo miejsca w pionie, aby umieścić 5 w pierwszej kolumnie. Więc 5 powinny być umieszczone na drugiej kolumnie ...

Starałem się stworzyć coś podobnego obrazu powyżej używając float:left, ale jest to wynik:

Jak stworzyć coś jak pierwszy obraz? Co jest nie tak z moim aktualnym kodem (który tworzy drugi obraz)?

---

To jest mój kod HTML:

<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> 

I to jest mój CSS:

.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

tylko nowoczesne tablety i smartfony powinien pokazać to poprawnie

W takim przypadku należy użyć CSS3 columns. Model browser support powinien być wystarczająco dobry.

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

trzeba będzie oddzielić kolumny do dodatkowych div. Float lewo wyrównuje elementy w poziomie, więc zachowują się jak słowa w zdaniu. Zawijanie każdej sekcji elementów div i unoszenie jej w lewo tworzy pożądany efekt, ale tylko w tym konkretnym przypadku. Jeśli ma to być bardziej dynamiczne, być może trzeba będzie ponownie przemyśleć swój projekt.

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>​ 

CSS:

.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/ (. Zmieniłem kolory, bo boli oczy)

---

Po kilku wyjaśnień w kwestii, czy to ma być dynamicznie zapełniane wysokościami przesuwania, wtedy nie ma rozwiązania, które by nie używało niektórych szalony Javascript. Będziesz musiał wymyślić inny projekt.

Answer 3

Prawdopodobnie możesz zadziałać z flexbox. Nie jestem pewien co do obsługi w przeglądarkach iOS, ale nowsze przeglądarki internetowe obsługują ją, więc warto się jej przyjrzeć.

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