Как сделать так, чтобы плавающий список DIV отображался в столбцах, а не в строках

У меня в руках загадка макета HTML. У меня есть большой алфавитный список, созданный моим PHP-приложением, и мне нужно вывести его в Интернет. Сгенерированная разметка выглядит следующим образом:

A
B
C
D
E
F
G
H
...

Таблица стилей выглядит так:

.list_item {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;

    width: 200px;
    float: left;
}

Отображаемый результат:

Rendered result

Как видите, это не очень удобно для чтения, я бы ожидал, что DIV будут выводиться в двух столбцах, поэтому первые столбцы будут содержать «ABC D», а второй - «EFG H».

Есть ли способ сделать это без изменения разметки? Можно добавить разные классы к четным и нечетным div, но поскольку div выводятся в цикле, невозможно разделить их по-разному.

См. демонстрацию: http://jsfiddle.net/KZcCM /

Примечание: я уже решил это, разделив список на две части с помощью PHP, но я хочу знать, есть ли здесь решение HTML / CSS.

7
задан Silver Light 30 March 2011 в 09:01
поделиться