Достаточно интересный способ организации обычного маркированного списка в две колонки.
Имеется определенное количество элементов li
списка ul
. Нужно организовать все li
в две колонки. Первое, что приходит на ум - это воспользоваться новыми правилами CSS3.
Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.
Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов li
я специально сделал нечетным:
- Колонка 1
- Колонка 2
- Колонка 3
- Колонка 4
- Колонка 5
- Колонка 6
- Колонка 7
- Колонка 8
- Колонка 9
- Колонка 10
- Колонка 11
Сделаем CSS-стилизацию списка, ничем не примечательную. Класс .clearfix
добавим в HTML-разметку для элемента ul
- это классическая очистка потока для плавающих потомков внутри блока-родителя. Элементы li
у нас будут плавать внутри ul
:
ul{
list-style-type: none;
width: 398px;
margin: 100px auto;
border: 1px solid #000;
font: bold italic 16px/30px Georgia, serif;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
Вот теперь немного интереснее, когда приступим к элементу li
. Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам - display: block
и width: 45%
.
Все элементы сделаем плавающими влево float: left
, поэтому CSS-правило display: block
можно опустить за ненадобностью, но оставим его для наглядности примера. Получается, что каждый из элементов li
является блочным, с фиксированной шириной и плавает влево.
В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила padding-bottom: 10px
, text-align: center
, background-color: #556677
- для красоты добавляем:
ul li{
display: block;
float: left;
width: 45%;
padding-bottom: 10px;
text-align: center;
background-color: #556677;
}
Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом nth-child
с аргументом even
, чтобы избежать дополнительной нагрузки на разметку в виде классов, которые придется добавлять в противном случае:
li:nth-child(even){
margin-left: 10%;
background-color: #667788;
}
На этом все.
Комментарии