Текст в несколько столбцов с помощью CSS3

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

Браузеры, которые поддерживают данные свойства: Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1.

Создание нескольких колонок

Для того чтобы задать несколько колонок необходимо воспользоваться свойством column-count:

Несколько колонок

article {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
}

 

Ширина колонки

Для того чтобы задать несколько колонок необязательно использовать вышеприведенное свойство. Это же можно сделать с помощью свойства column-width, которое задает ширину колонки:

Ширина колонки

article {  
    -moz-column-width: 150px;  
    -webkit-column-width: 150px;   
    column-width: 150px;  
}

 

Интервал между колонками

Что касается колонок, то присутствует такое свойство, с помощью которого можно задать интервал между колонками. Это свойство column-gap:

Интервал между колонками

article {     
    -webkit-column-gap: 30px;  
    -moz-column-gap: 30px;  
    column-gap: 30px;  
}

 

Линии между колонками

И последнее свойство, которое мы рассмотрим, это свойство с помощью которого можно задать границы между колонками:

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

article {  
    -moz-column-rule: 1px dotted #ccc;  
    -webkit-column-rule: 1px dotted #ccc;  
    column-rule: 1px dotted #ccc;  
}

 

Вывод

Большие тексты действительно легче читать в несколько колонок, как делают все журналы и газеты. Приятно что появилась такая возможность в CSS3, где можно сделать текст в несколько колонов без использования блоков div с обтеканием.
Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.