Требуется разместить текст так, чтобы он отображался в нескольких колонках и при изменении рабочей области экрана адаптивно изменял свое положение. CSS3 позволяет сделать так, чтобы какая-то часть содержимого разбивалась на несколько колонок.
<html>
<head>
<title>Заголовок</title>
<style>
#text{
column-width:15em; // ширина колонки
}
</style>
</head>
<body>
<div id="text" role="text">
Таким образом постоянный количественный...БОЛЬШОЙ ОБЪЕМ ТЕКСТА
</body>
</html>
Этот код обозначает то,что независимо от размера области просмотра, содержимое будет простираться на колонки шириной 15em, также изменение размеров области просмотра будет динамически приводить к изменению количества колонок. Результат работы кода:
Для фиксированного количества колонок требуется указать:
#text{
column-count: 4; // фиксированное количество колонок
}
Для добавления промежутка и разделителя колонок требуется указать следующие стили:
#text{
column-gap: 2em; // расстояние между колонками
column-rule: thin dotted #999; // линия между колонками
column-width: 12em; // ширина колонки
}
Добавив еще парочку стилей приведем в более приглядный вид:
