elenco ordinato flusso di due colonne

Question

qualcuno conosce una tecnica preferibilmente css only per ottenere un ol per fluire in due colonne se è più lungo dell'altezza del contenitore? Il numero di elementi nell'elenco può variare e l'altezza del contenitore potrebbe cambiare.

Quando provo a impostare il li su width:50% e float:left, esso va in due colonne ma 2 va al lato 1 anziché al di sotto di esso.

quello che voglio ottenere è questo:

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

Answer 1

Questo funziona per i browser moderni (cioè non IE) utilizzando le regole column-count e 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; 
} 

L'opzione cross-browser potrebbe essere:

1. definiscono due div all'interno della OL e galleggiare verso sinistra
2. pre-calcolare il numero totale di LI di
3. se il totale supera la capacità di un DIV, metti il ​​resto nel secondo DIV