Многоколоночный текст на CSS3.
В этой статье мы поговорим о том, как разбить текст на колонки с помощью CSS3.
Раньше, чтобы разбить текст на колонки, нам нужно было использовать float. Теперь же для этого есть отдельное свойство. Чтобы было понятнее, создадим небольшую html разметку.
<html>
<head>
<title>Multi-columns in CSS3</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis alias architecto nulla facilis! Recusandae, sunt, impedit quidem perferendis iste fugit inventore similique aut dolore magnam est quasi quas sit magni commodi reiciendis tempore laudantium blanditiis non at nostrum ut officia enim eum possimus officiis atque excepturi tenetur consequuntur aliquam! Eligendi?</p>
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
<h2>Заголовок H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.</p>
</div>
</body>
</html>
Итак, у нас есть текст. Чтобы разбить его на 3 колонки, нужно воспользоваться свойством column-count
.block {
column-count: 3;
}
Также, мы можем указать ширину колонок, тогда их количество будет вычисляться автоматически.
.block {
column-width: 200px;
}
При помощи свойства colump-gap можно изменять расстояние между колонками.
.block {
column-gap: 100px;
}
И, также, с помощью свойства column-rule мы можем ставить разделитель между колонками. Он задаётся так же, как и border.
column-rule: 2px dashed #ccc;
Если мы зададим нашему блоку высоту, то у нас появится горизонтальный скрол. Что логично :)
Вот и всё, что можно рассказать про это свойство. В конце стоит лишь добавить, что поддерживается оно плохо: Internet Explorer начиная с 10 версии, а android вообще не поддерживает. Так что, применяйте его только там, где текст и в одну колонку будет отображаться нормально.
-
Создано 16.04.2014 20:45:28
-
Михаил Русаков
Комментарии (11):
Михаил, здравствуйте. А почему к статьям Вы не прикрепляете примеры... как это выглядит. Было бы намного вкуснее, как для меня! А вообще за материал спасибо!!
Ответить
Михась, как всегда статья интересная, благодарю! Так держать! Согласен с Максимом, примеры были бы кстати. По поводу примеров, собирался написать тебе на e-mail, но можно и тут. Если добавить функцию к статьям ДЕМО, было бы славно. Успехов!
Ответить
Пожалуйста, напишите статьи про Zend Framework или статьи о том , как создать интерактивные элементы на странице(слайдер , ползунок, фотогаллерею).
Ответить
поищите на сайте.Про слайдеры,ползунки и фото галереи есть. Также и в бесплатных курсах)
Ответить
Вот вот, примеров только и не хватает. А то html код написан и ниже ещё какие то кусочки, а как и куда их лепить непонятно.
Ответить
какие кусочки?что непонятно? а немного логики,чтобы научиться Если вы не знаете,что такое CSS и HTML и для вас данный,весьма подробный урок - кусочки.Учите,как говорится,матчасть,начиная с первого раздела про HTML и всё по порядку.Уроки построены так,чтобы было понятно,по мере изучения. Тут же,всё понятно. Пример структуры html документа,и свойства стилей css,при помощи которых делается многоколоночный текст.А если вы не понимаете что .block нужно размещать в style.css или в теге <style></style> в html документе,то это уже ваши проблемы. Не разъяснять же в каждом уроке азы. Так что простите,ваша критика неуместна и в дальнейшем такие комментарии как ваш будут удаляться. Благодарю за внимание
Ответить
Не работает в Google Chrome
Ответить
естественно. Гугл так адаптировал Chromium,что то же самое,как и на Android аналогия.Потому и не работает)
Ответить
Но пренебрегать 45% пользователей интернета, использующими гуглохром, как-то не очень красиво
Ответить
В данном случае вас никто не просит в обязательном порядке использовать текущие атрибуты.Это всего-лишь урок о свойстве в CSS3.А претензии от 45 процентов пользователей,можете предъявить компании ГУГЛ. Тема закрыта
Ответить
Чтоб все заработало, нужно к свойствам приписать следующее: -webkit- (это для гугл хрома) и -moz- (для мазилы). Вот пример: .block { -moz-column-count: 3; /* Для Firefox */ -webkit-column-count: 3; /* Для Safari и Chrome */ column-count: 3; /* Для всех других */ }
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.