Список в несколько колонок css

Список в несколько колонок css

November 18, 2013

Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов списка . Нужно организовать все в две колонки. Первое, что приходит на ум — это воспользоваться новыми правилами CSS3.

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов я специально сделал нечетным:

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс добавим в HTML-разметку для элемента — это классическая очистка потока для плавающих потомков внутри блока-родителя. Элементы у нас будут плавать внутри :

Вот теперь немного интереснее, когда приступим к элементу . Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам — и .

Все элементы сделаем плавающими влево , поэтому CSS-правило можно опустить за ненадобностью, но оставим его для наглядности примера. Получается, что каждый из элементов является блочным, с фиксированной шириной и плавает влево.

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним — “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее — опять все по порядку. Три правила , , — для красоты добавляем:

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом с аргументом , чтобы избежать дополнительной нагрузки на разметку в виде классов, которые придется добавлять в противном случае:

  • Like
  • Tweet
  • +1
Читайте также:  Как восстановить доступ к личному кабинету налогоплательщика

Angular — именованные outlets

Для меня немного запутанная картина с именованными областями отображения и главное — с правильной настройкой. Нужно немного прояснить для. … Continue reading

Последнее изменение поста: 23 октября 2018 в 21:58

Сегодня небольшой урок по верстке ul/li в несколько колонок на чистом css.

Задача: Разбить список

    на две колонки, используя чистый CSS

Решение:

Добавляем к ul класс col2

и далее в css прописываем следующие стили

Если вы прописываете стили не посредственно в html, то у вас будет такая картина:

Вот так легко и просто разбить html списки на 2 колонки, по сути таким же образом можно поделить и на 3,4,5 и т.д. колонки.

Доброго времени суток всем читателям моего блога! Уже довольно давно не писал в блог, сегодняшний пост тоже не будет особо большим, но зато будет информативным.

Сегодня, в связи с тем, что копирайтер неправильно понял мой заказ и сделал тексты с длинными списками, на один из моих сайтов, а я когда одобрял гм… не особо вглядывался в написанное.

В общем, появилась нужда гармонично вписать эти списки в дизайн сайта, что бы не особо бросались в глаза своей неряшливостью. Для этого было решено вывести стандартный HTML список (теги UL и LI) в две колонки, что бы они более компактно размещались на странице и не портили вид длинной простыней.

Короче перейдем к делу и не будем тянуть котов или кого то еще за жизненно важные органы…

Как вывести HTML список UL LI в две колонки с помощью CSS

Все более чем просто, так как мне не хотелось возится с таблицами и тому подобной хренью, которая отнимает время при заполнении сайта.

Читайте также:  Произведена замена материнской платы

Вот стандартный вид списка у вас на сайте, просто присваиваем ему класс — twocolumn.

Ссылка на основную публикацию
Adblock detector