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

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

<div class="list_item">A</div>
<div class="list_item">B</div>
<div class="list_item">C</div>
<div class="list_item">D</div>
<div class="list_item">E</div>
<div class="list_item">F</div>
<div class="list_item">G</div>
<div class="list_item">H</div>
...

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

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

    width: 200px;
    float: left;
}

Результат:

Rendered result

Как вы можете видеть, это не очень читаемо, я бы ожидал, что DIV будет выводиться в двух столбцах, поэтому первые столбцы будут содержать "A B C D", а второй - "E F G H".

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

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

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

Ответы

Ответ 1

В зависимости от того, какие браузеры вам необходимо поддерживать, вы можете использовать новое свойство CSS3 column-count.

С простой отметкой списка

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

Используйте этот CSS:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Вот скрипка - хотя она еще не поддерживается ни в одной версии IE. Для поддержки более старых браузеров существуют решения jQuery, такие как Плагин JQuery для столбцов, который вы можете использовать, а также, или вместо решения CSS3,

Ответ 2

Используя вашу разметку, решение CSS3 будет выглядеть так:

HTML

<div id="wrap">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

CSS

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

С помощью этого метода вы получаете дополнительное преимущество от высоты столбцов, независимо от содержимого каждого внутреннего <div>.

Если это явно не очевидно для всех префиксов для конкретного поставщика, поддержка браузера для этого ограничена современными браузерами (так, как мне это нравится), так что это не действительно готовый к выпуску код (если вы не хотите, чтобы он был острый).

Демо: jsfiddle.net/Marcel/tk2tS

Ответ 3

Я не могу думать о чистом решении CSS.

Ты сказал:

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

Итак, у вас есть сила PHP. В этом случае я бы сохранил код, который у вас уже есть, но выводит элементы в другом порядке:

Смотрите: http://jsfiddle.net/xyLkz/

<div class="list_item">A</div>
<div class="list_item">E</div>
<div class="list_item">B</div>
<div class="list_item">F</div>
<div class="list_item">C</div>
<div class="list_item">G</div>
<div class="list_item">D</div>
<div class="list_item">H</div>

Насколько легко это будет зависеть от того, как структурируется ваш PHP.

Если у вас есть все в массиве, то в этом случае у вас будет только два цикла (один выводет нечетные элементы массива, другие четные). Если вам нужна поддержка столбцов n, это тоже не проблема.

В чем проблема, если вы строите вывод "на лету" внутри цикла. В этом случае вам, вероятно, придется прибегнуть к буферизации вывода каждой итерации цикла в массив, а затем выполнить тот же процесс с двумя циклами.

Ответ 4

@серебро

Я стараюсь использовать его без использования дополнительной разметки, если он вам полезен

http://jsfiddle.net/sandeep/GGwPq/1/

Ответ 5

Вам не нужно использовать float для элементов, но, возможно, для поля, в котором находятся элементы, попробуйте следующее:

<div style="float: left; width: 200px;">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
</div>
<div style="float: left; width: 200px;">
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

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

    width: 200px;
    /*float: left;*/
}

Изменить: теперь с двумя столбцами:)