Упорядоченный список двух столбцов потока

Question

Кто-нибудь знает, предпочтительно метод CSS только для того, чтобы заставить ol течь в два столбца, если он длиннее, чем высота контейнера? Количество элементов в списке может варьироваться, а высота контейнера может меняться.

Когда я пытаюсь установить li в width:50% а также float:left он идет в двух столбцах, но 2 идет рядом с 1, а не под ним.

чего я хочу добиться, так это:

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

Answer 1

Это будет работать для современных браузеров (т.е. не IE), использующих column-count а также column-gap правила:

играть на скрипке

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

Кросс-браузерная опция будет:

1. определите два DIV внутри OL и поместите их влево
2. предварительно рассчитать общее количество LI
3. если общая сумма превышает емкость одного DIV, оставьте остальные во втором DIV