Многоколоночный текст на CSS3

admin

8 лет назад

Нужно распределить текстовый контент в несколько столбцов. И мы хотим сделать это при помощи средств CSS
CSS3 предлагает вариант организации текстового контента при помощи multi-column. Это дает возможность разбить на столбцы текст без дополнительной разметки < div > или < table >.

Важно: Internet Explorer 9 не поддерживает данное CSS свойство.

Свойства CSS3

column-count — требуемое количество столбцов для данного элемента
column-width — ширина каждого столбца
column-gap — расстояние (padding) между столбцами
column-rule — определяет разделитель как границу между столбцами

Количество столбцов фиксированное, ширина колонки автоматическая:

#multi-column1 {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  сolumn-gap: 20px;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  text-align: justify;
}

Пример работы: (в старых браузерах не поддерживается)

Ширина столбца столбца фиксированная, количество столбцов автоматическое:

#multi-column2 {
  column-width: 200px;
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  column-gap: 30px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  text-align: justify;
}

Пример работы:
[raw]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat non tellus tempor aliquam. Nunc sit amet felis ipsum, sodales porta enim. Aenean pharetra consectetur purus, a posuere massa dignissim sit amet. Aenean iaculis tincidunt turpis ac vulputate. Donec at sagittis nibh. Vestibulum id tellus et ante euismod pellentesque non at ligula. Nunc non adipiscing dolor. Aenean dapibus volutpat facilisis. Sed ornare ultrices orci, at facilisis lacus adipiscing ac. Etiam eu nisl ante. Nullam ac nisl in dui dignissim dictum. Vestibulum eget massa magna, et mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id erat non tellus tempor aliquam. Nunc sit amet felis ipsum, sodales porta enim. Aenean pharetra consectetur purus, a posuere massa dignissim sit amet. Nunc sit amet felis ipsum, sodales porta enim.

[/raw]

Разделитель между столбцами:

Между колонками текста можно так же вставить разделительную линию:

  column-rule: 2px solid #9c9c9c;
  -moz-column-rule: 2px solid #9c9c9c;
  -webkit-column-rule: 2px solid #9c9c9c;

Синтаксис полностью аналогичен свойству border в CSS

Для поддержки браузеров Mozilla и Webkit необходимо использовать в CSS свойствах, префиксы -moz- и -webkit-.
Источник