Просто используйте CSS3. Не уверен, насколько широко он поддерживается , но он избавляет от головной боли и намного эффективнее при внесении изменений.
Используйте column-count
и column-width
для управления количеством столбцов и шириной каждого столбца. Вот пример кода и довольно впечатляющие результаты. Префикс -webkit и -moz пока не стандартизирован во всех браузерах.
.multi-column {
/* Standard */
column-count: 2;
column-width: 150px;
/* Webkit-based */
-webkit-column-count: 2;
-webkit-column-width: 150px;
/* Gecko-based */
-moz-column-count: 2;
-moz-column-width: 150px;
}
Применительно к этому <div>
<div class="multi-column">
Ethelred of Wessex
Louis XII of France
George Frideric Handel
George Washington
Charles Deslandes
Andrew Jackson
Alfred Vail
William McKinley
Woodrow Wilson
Abdul-Aziz ibn Saud
Fidel Castro
Charles de Gaulle
Leonardo da Vinci
</div>
Разве вы не хотите увидеть, как это выглядит после всей этой тяжелой работы?
<Ч />
Но что, если бы было 3 столбца? Нет проблем.
<Ч />
Но он никак не может обработать 4 столбца, которые вы скажете:
<Ч />
Довольно! Я должен прекратить добавлять их сейчас
<Ч />
Боже, пожалуйста, ОСТАНОВИТЕ !!