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

Оцените материал
(0 голосов)

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

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

Для 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; }

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

Прочитано 764 раз Последнее изменение Понедельник, 24 октября 2016 11:54
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+