Архив метки: Колонки

Колонки в CSS3

Использование колонок в CSS3.

Для того чтобы текст в элементе стал много колоночным необходимо через стили в CSS прописать одно из свойств: column-width или column-count в значение, отличное от auto. 

Есть 2 возможности при создания колонок.

1 способ — указать количество колонок.

К примеру для создания текста из 2-х колонок, нужно выставить след свойство в стилях

#Col_Count{
-webkit-column-count: 2;
}

получиться так

2 Колонки

2 способ — указать ширину колонок

Пример укажем ширину колонок 80px, при общей длине блока 400px

#Col_width{
width:400px;
-webkit-column-width: 80px;
}

получиться так

Колонки

Видно что хотя общая ширина 400 и мы указали ширину 1 колонки 80, всего колонок не 5 (400/80=5) а 4. Это связано с тем что есть еще межколночные интервалы.

Посмотреть пример

Скачать пример