Как в html разделить текст на 2 колонки

Второй способ идет табличным:

При помощи кода текстура разбивается для текста на два столба 2 столбца, где идет вертикальная полоса разделение.

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

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

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

CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count , column-gap , column-width и column-rule . Для наглядности значения некоторых свойств показаны на рис. 1.

Рис. 1. Стилевые свойства для колонок

• column-count — устанавливает оптимальное число колонок.
• column-gap — расстояние между колонками.
• column-width — оптимальная ширина колонок.
• column-rule — разделительная линия между колонками.

Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.

Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).

Пример 1. Три колонки

HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx

     .column 
Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Аподейктика порождена временем. Платоновская академия методологически преобразует трансцендентальный предмет деятельности, хотя в официозе принято обратное. Отношение к современности реально создает позитивизм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.





 
Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение, следовательно, философски оспособляет закон исключённого третьего, изменяя привычную реальность.
 
  

Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.

Рис. 2. Многоколоночный текст

Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns , оно одновременно устанавливает ширину колонок и их число (пример 2).

Пример 2. Использование columns

.column

Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.

Разделить контент на колонки

В CSS 3 появилась возможность разбивать контент на несколько колонок. IE поддерживает данную возможность с 10 версии.

1-ый способ: указанное число колонок

Разделить контент на указанное число колонок можно через свойство column-count .

.columns < column-count: 3; column-gap: 20px; column-rule: 1px solid #CCC; >

Параметр column-gap определяет расстояние между колонками.

2-й способ: автоматическое число колонок

Если указать параметр column-width (без указания кол-ва колонок через параметр column-count ), то контент автоматически разделится на несколько колонок с указанной шириной.

.columns < column-width: 200px; column-gap: 20px; >

В качестве примера разделения контента на колонки, можно посмотреть любое примечание в Википедии: en.wikipedia.org/wiki/World_Wide_Web#References

Обновлено: 01 ноября 2020 | История изменений

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

Колонки — Основы верстки контента

Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.

Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.

Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.

Создание колонок

Для создания колонок в CSS существует свойство column-count . Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.

 class="columns-2"> David Bowie, original name David Robert Jones, (born January 8, 1947, London, England—died January 10, 2016, New York, New York, U.S.), British singer, songwriter, and actor who was most prominent in the 1970s and best known for his shifting personae and musical genre hopping. To call Bowie a transitional figure in rock history is less a judgment than a job description. Every niche he ever found was on a cusp, and he was at home nowhere else—certainly not in the unmoneyed London suburb where his childhood was as dingy as his adult life would be glitzy. While this born dabbler’s favourite pose was that of a Great Artist beguiled by rock’s possibilities as a vehicle, in truth he was more a rocker drawn to artiness because it worked better than any other pose he had tried (not that he was not eclectic—he admired Anthony Newley and Jacques Brel and studied mime with Lindsay Kemp).  

.columns-2  column-count: 2; > 

Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.

.columns-2 p  margin-top: 0; > 

По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width — с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width , здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.

Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.

Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂

.columns-2  column-count: 2; column-width: 250px; > 

Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width . Последний пример можно записать так:

.columns-2  columns: 250px 2; > 

Первым значением записывается ширина колонки, а вторым их количество

Перейдите на сайт CodePen и попробуйте сузить окно браузера. В определенный момент колонки уйдут, и весь текст будет выстроен в одну колонку.

Отступы между колонками

В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em . Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.

Задать отступы между колонками можно с помощью свойства column-gap . Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.

Вы можете использовать различные единицы измерения внутри свойства column-gap . Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.

.columns-2  columns: 250px 2; column-gap: 30px; > 

Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.

Границы между колонками

Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border , которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.

Для создания границы используется свойство column-rule , которое является краткой записью следующих свойств:

• column-rule-width — ширина границы.
• column-rule-style — тип границы. Значения совпадают со значениями свойства border .
• column-rule-color — цвет границы.

Вы можете указывать как три отдельных свойства, так и краткую запись.

.columns-2  columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > 

Добавление контента в несколько колонок

Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.

Для разделения колонок используется свойство column-span . Оно принимает всего два значения:

• none — значение по умолчанию. Текст находится просто внутри колонок.
• all — текст «выходит из колонки» и разделяет их.

h2  text-align: center; column-span: all; > .columns-2  columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > 

Перенос колонок

В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.

• break-before
• break-after
• break-inside

По названию уже можно понять, что речь идет о переносе до/после и внутри. Все три свойства принимают огромное количество значений, так как рассчитаны не только для колонок, но и для вывода на печать.

При работе с CSS Multi-column Layout нас больше всего интересует значение avoid , которое запрещает перенос.

Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.

Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.

figure  border: 1px solid; break-inside: avoid; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: