2011-09-06 15 views
6

Powiel możliwe:
How to stack divs from top to bottom in CSSJak zrobić stos div najpierw w pionie, a następnie w poziomie?

kiedy mam wiele sąsiednich div z float:left one układać tak:

_______ 
| 1 2 3 | 
| 4 5 | 
|_______| 

Chcę stos tak:

_______ 
| 1 4 | 
| 2 5 | 
|_3_____| 

jsFiddle with the horizontal stacking

Jak mogę osiągnąć pionowe układanie?

+0

To jest dobre pytanie, ale dlaczego w pierwszej kolejności? chcesz wypełnić przestrzeń wyświetlaną przez użytkownika, a następnie przewijać dalej, aby zobaczyć więcej ... Wygląda na to, że pracujesz na jakiejś mobilnej stronie internetowej. Tak więc –

+0

Rzeczywiście, zagłosowałam na zamknięcie –

Odpowiedz

5

@ pinouchon; dla tego typu układu możesz użyć do tego css3 column-count property.

CSS:

div#multicolumn1 { 
     -moz-column-count: 2; 
     -moz-column-gap: 10px; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 10px; 
     column-count: 2; 
     column-gap: 10px; 

} 

Sprawdź mój przykład tutaj, aby uzyskać więcej How to stack divs from top to bottom in CSS

przeczytać ten artykuł, aby uzyskać więcej http://www.quirksmode.org/css/multicolumn.html

+0

To [nie działa w przypadku IE, w wszystkie] (http://caniuse.com/#search=column-count). –

+0

tak; css3 właściwość kolumna-count nie działa w IE, możesz użyć js http://www.csscripting.com/css-multi-column/ w komentarzu do IE. – sandeep

Powiązane problemy