Как разделить список на колонки средствами CSS
+2

Как разделить список на колонки — на такой вопрос я наткнулся недавно читая один из форумов. Это и

сподвигло меня написать данную статью. Или даже не статью, а своего рода совет, или маленькое

руководство.

Такое возможно реализовать с помощью Javascript, но в сейчас я расскажу вам как это провернуть с помощью только CSS. Плюсы такого решения налицо:

— простота использования (с кодом разберется даже начинающий);
— кроссплатформенность (все таки только CSS);
— достойный результат.

И так, по порядку!

Чтобы разделить списки на несколько колонок, нужно:

1. определиться с количеством колонок
2. определить общую ширину списка

Допустим, у нас есть список, который нужно разделить на 3 колонки

<ol>
<li>раз</li>
<li>два</li>
<li>три</li>
</ol>

Что мы делаем?

мы задаем общую ширину списка

ol {width:600px;}

и задаем ширину каждого элемента списка исходя из количества колонок.
Ширина колонок = общая ширина списка / количество колонок,
в нашем случае 600/3=200 (пикселей)

li {width:200px; float:left;}

Мы также указали выравнивание по левому краю.
На этом все! Теперь вы знаете как разделить список на несколько колонок.

+2
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: CSS. Прямая ссылка на запись.

Комментарии к записи Как разделить список на колонки средствами CSS: 6

  1. Павел Волков сказал(а):

    Ну это ясно, если длина списка известна. Но такой способ не пройдет, если список динамически обновляется.

  2. Петр сказал(а):

    Спасибо за пример!
    В демке кодировка слетает. Ну и лучше было бы, если бы демка открывалась в новом окне, а не в том же ;).

    По делу. Если не ошибаюсь, в данном примере, первый, второй, третий элементы списка равномерно распределяются по трём колонкам. Есть ли способ сперва «заполнить» первую колонку, затем вторую и третью?

    Пример — алфавитный указатель. Его нельзя «параллелить» на три столбика.
    Как его можно разделить на три столбика последовательно?

  3. Куаныш(Алматы) сказал(а):

    коп-коп рахмет брат!!!(большой спасибо брат)

  4. Ванек сказал(а):

    На мобилке все съезжает

  5. tezeksew сказал(а):

    Несмотря на то, что колонки можно применить к отдельным разделам документа, Word позволяет вводить и отменять колонки в документе, даже без разбиения их на разделы. Более подробно об этом читайте ниже, в разделе Как отменить колонки .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *