uporządkowana lista dwóch przepływów kolumnowych

Question

Ktoś wie o technice najlepiej css tylko dla uzyskania ol do przepływu w dwóch kolumnach, jeśli jest dłuższy niż wysokość kontenera? Liczba pozycji na liście może się różnić, a wysokość pojemnika może się zmieniać.

Kiedy próbuję ustawić LI na width:50% i float:left przechodzi w dwie kolumny, ale 2 idzie obok 1 zamiast pod nią.

co chcę osiągnąć to:

1. abcdef 4. abcdef
2. abcdef 5. abcdef
3. abcdef

Answer 1

To będzie pracować dla nowoczesnych przeglądarek (IE nie IE) korzystanie z reguł column-count i column-gap: fiddle

ol#two-columns { 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

Opcja cross-browser byłoby:

1. zdefiniować dwa DIV wewnątrz OL i unoszą je w lewo
2. wstępnie obliczyć całkowitą liczbę Li
3. jeżeli łączna przekracza pojemność jednego DIV, resztę umieszcza w drugim DIV