Разделение неупорядоченного списка на колонки в HTML
Быстрый ответ
Для построения двухколоночной разметки маркированного списка прибегнем к CSS-свойству column-count
:
ul { column-count: 2; }
Тогда ваш HTML-код будет представлен так:
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ul>
Такой подход позволяет разделить список на две колонки с равномерной расстановкой элементов.
[AsideBanner]
Используем возможности современного CSS
Кроме column-count
, CSS предоставляет большой арсенал средств для создания многоколоночных макетов без потери семантической правильности кода.
Макет сетки как освобождение от проблем
Использование сеточного макета — элегантный и практичный современный подход к созданию разметки:
ul {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Двухколоночная сетка для равномерного распределения */
justify-content: start; /* Выравнивание элементов по левому краю контейнера */
grid-auto-flow: column; /* Элементы автоматически размещаются в колонках */
}
Этот метод идеально подходит для адаптивных макетов.
Визуализация
Вид нашего двухколоночного маркированного списка можно представить следующим образом:
Мороженое (🍦) с двумя сортами рядом:
Сорт Шоколад (🍫) в первом стакане: [* Шоколад *, * Шоколад *, * Шоколад *]
Сорт Клубника (🍓) во втором стакане: [* Клубника *, * Клубника *, * Клубника *]
В одноколоночной верстке это выглядит так:
🍦
🍫 Шоколад
🍫 Шоколад
🍫 Шоколад
🍓 Клубника
🍓 Клубника
🍓 Клубника
В двухколоночной верстке список разбивается точно так же, как стаканы с мороженым:
🍦🍦
🍫 Шоколад 🍓 Клубника
🍫 Шоколад 🍓 Клубника
🍫 Шоколад 🍓 Клубника
Каждая колонка равномерно расставляет элементы, формируя идеальное сочетание компонентов.
Адаптивный дизайн и поддержка старых браузеров
При применении современных решений необходимо обеспечить адаптивность дизайна и совместимость со старыми версиями браузеров. Воспользуйтесь float: left
в комбинации с заданной шириной элементов:
ul li {
float: left; /* Элементы списка выстраиваются в ряд */
width: 50%; /* Каждый элемент занимает половину доступного пространства */
list-style-position: inside; /* Маркеры списка располагаются внутри контейнера */
}
Преобразование списка в две колонки при помощи JavaScript
Для браузеров, не поддерживающих CSS Grid или column-count
, возможно использование JavaScript для выполнения манипуляций с DOM-деревом:
var $list = $('ul');
var listItems = $list.children('li');
var listLength = listItems.length;
var middle = Math.ceil(listLength / 2); /* Разделим список на две части */
/* Создание второй колонки при помощи JavaScript */
$list.after($list.clone().addClass('column-two'));
$('.column-two').html('');
listItems.each(function(i){
$(this).appendTo(i < middle ? $list : $('.column-two')); /* Разбивка элементов по колонкам */
});
Таким образом, список пополам делится и элементы распределяются по обеим колонкам.
Полезные материалы
- Полное руководство по Flexbox | CSS-Tricks — построение гибких двухколоночных макетов.
- Использование многостолбцовых макетов | MDN — применение многостолбцовых макетов.
- Пример на W3Schools — эмуляция и демонстрация многоколоночных маркированных списков.
- Свойство
columns
| CSS-Tricks — разбор основ многоколоночного форматирования. - Разъяснение Flexbox | Smashing Magazine — подробный разбор Flexbox.
- Практическое использование CSS Grid | A List Apart — применение CSS Grid в реальных проектах с ценными примерами и советами.