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

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

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

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

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

1
2
3
4
5

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

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

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

1
2
3
4
5

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

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

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

1
2
3
4
5

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

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

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

1
2
3
4
5

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

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/css3-multi-columns/