geordnete Liste zweispaltige Strömung

Question

Wer weiß von einer Technik, die vorzugsweise nur css ist, um ein Öl in zwei Spalten fließen zu lassen, wenn es länger ist als die Höhe des Containers? Die Anzahl der Elemente in der Liste kann variieren und die Höhe des Containers kann sich ändern.

Wenn ich versuche, das li width:50% und float:left Einstellung es in zwei Spalten geht aber 2 geht neben 1 statt darunter.

was will ich erreichen, ist dies:

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

Answer 1

Dies wird für moderne Browser arbeiten (dh nicht IE) unter Verwendung der column-count und column-gap Regeln:

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

Die Cross-Browser-Option wäre:

1. zwei DIVs innerhalb des OL definieren und schweben sie nach links
3. , wenn die Summe der Gesamtzahl der LI vorab berechnen übersteigt die Kapazität von einem DIV, legte den Rest in den zweiten DIV