Размещение списка в несколько колонок

Статья  может быть полезна Junior PHP-разработчикам, так как в ней описано решение задачи, которая часто встречается при разработке интернет-магазинов. Часто возникает необходимость вывести какой либо список, например список подкатегорий, в несколько колонок.

Часто возникает необходимость вывести какой либо список, например список подкатегорий, с в несколько колонок. Использовать в этом случае простое прилипание float:left для каждого элемента не всегда правильно, так как зачастую в этом случае необходимо соблюдать алфавитный порядок именно в колонках, а не в строках.

Задача решается как всегда множеством способов, на стороне сервера и на стороне клиента, но мы рассмотрим два варианта:

1. на стороне сервера с помощью php
2. на стороне клиента с помощью css

Великий и могучий PHP

Мы имеем массив:

$avtos = array (
    'Audi',
    'BMW',
    'Mersedes',
    'BYD',
    'Chana',
    'Chery',
    'Chevrolet',
    'Chrysler',
    'Citroen',
    'Dacia',
    'Dadi',
    'Daewoo',
    'Daihatsu',
    'Dodge',
    'Ford',
    'Fiat'
);

Задача состоит в том, чтобы этот список выводился в браузере в 4 колонки, независимо от кого, сколько в этот массив будет добавлено элементов.

$cols = 4; // количество колонок
$rows = ceil(sizeof($avtos)/$cols); // количество строк в колонках (округляем вверх)
// в последней колонке количество строк будет либо равно $rows либо меньше
$a = 0; // ключ в массиве авто
for($i=0;$i<$cols;$i++){ // выводим колонку
    echo "<ul class='col'>";
    for($j=0;$j<$rows;$j++){ // выводим колонку
        if(isset($avtos[$a])){
            echo '<li>';
            echo $avtos[$a];
            echo '</li>';
            $a+=1;
        }
        else
            break;
    }
    echo "</ul>";
}
?>
<style>
.col{float: left; margin-top: 0;}
</style>

Результат:

• Audi
• BMW
• Mersedes
• BYD

• Chana
• Chery
• Chevrolet
• Chrysler

• Citroen
• Dacia
• Dadi
• Daewoo

• Daihatsu
• Dodge
• Ford
• Fiat

Лаконичный CSS

А теперь лаконичное решение с помощью css:

ul.columns {
  -moz-column-gap: 2em;
  -moz-columns: 4 150px;
  padding: 15px 0;
}

ul.columns li{
  display: inline-block;
  margin: 0 0 15px 30px;
  text-align: left;
  width: 145px;
}