Как создать сайт

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

Здравствуйте! В этой статье я хочу рассказать о таком свойстве  CSS3 как возможность  разделять текст на колонки. Свойство это появилось недавно, поэтому его надо использовать с префиксом, хотя возможно в будущем можно будет использовать без префикса. Свойство – это column. Причем имеются следующие свойства:

  • column-count – количество колонок
  • column-gap – задает расстояние между колонками в многоколоночном тексте
  • column-width – задает ширину колонки
  • column-rule – задает цвет, толщину и стиль линии, разделяющей колонки.

многоколоночный текст на CSS


Для column-rule  нудно задать цвет,стиль и толщину впрочем как и для рамки свойство border. Например:

<html>
<head>  
<title>Multi-columns in CSS3</title>
  <metacharset="utf-8">
</head>
<body>  
<divclass="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;
  -webkit-column-width: 200px;
  
}

При помощи свойства colump-gap можно изменять расстояние между колонками.

   .block {
  column-gap: 100px;
-webkit-column-gap: 100px;
}

И, также, с помощью свойства column-rule мы можем ставить разделитель между колонками. Он задаётся так же, как и border.

    .block {
    column-rule: 2px dashed #ccc; 
   -webkit-column-rule: 2px dashed #ccc;
  }

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

Читайте также  Позиционирование в CSS

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: