Давно известно, что человеческий глаз больше привык к чтению текста, разделенного на несколько колонок малой ширины. Такое решение в контексте веб-дизайна имеет, конечно, свои плюсы и минусы, но иногда оно работает (хотя и не всегда). Так что давайте посмотрим, как сделать это быстро и эффективно...
Чтобы разделить текст на колонки, мы, конечно же, будем использовать команды, доступные в CSS 3, например: column-count , column-rule , column-rule-style , column-gap.
Как вы можете догадаться, количество столбцов определяется командой column-count:
Расстояние между колонками определяется стилем column-gap :
Мы также можем отделить колонны друг от друга какой-нибудь рамкой. Мы используем для этого column-rule-style :
Ширина границы, заданной выше, изменяется командой column-rule-width :
Мы также можем изменить цвет, используя column-rule-color :
Вы также можете задать стиль границы, ширину и цвет с помощью команды column-rule :
Пример
Результат :
Результат :