columns | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » Свойства колонок


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


columns | Свойство CSS

Свойство columns устанавливает ширину и количество колонок.




Свойство columns сокращённый способ установить ширину и количество колонок в многоколоночном элементе.Тоесть имеется в виду что для свойства прописываются сразу два значения через пробел.Одно из значений указывает на ширину,второе на количество колонок.Очерёдность написания значений не имеет значения,браузер ориентируется на значение auto,число без указания числового типа воспринимается как количество колонок.Существует альтернативное свойство для браузеров Safari и Chrome -webkit-columns.Для браузера Mozila применяется альтернативное свойство -moz-columnsНа момент создания статьи поддерживалось только браузерами Internet Explorer и Opera.Свойство применимо к блочным элементам (кроме таблиц),ячейкам и элементам,у которых display установлен как inline-block,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к columns


Свойство
Описание
column-widthСвойство указывает на ширину колонок
column-countСвойство указывает на количество колонок
-webkit-columnsАльтернативное свойство для браузеров Safari и Chrome
-moz-columnsАльтернативное свойство для браузера Mozila

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство columns</title>
<style type="text/css">
<!--
div {
width:220px;
}
#columns {
columns:2 100px;
-webkit-columns:2 100px;
-moz-columns:2 100px;
}
-->
</style>
</head>
<body>
<center>
<div id="columns">
Свойство разделит этот текст на две колонки соответственно прописанным значениям,при этом ширина каждой колонки будет составлять не менее 100px ( пикселей ).
Без значения указанного в теге div,ширина указанная в свойстве columns будет расцениватся браузером как минимальная.
</div>
</center>
<br>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-multicol/#columns
Категория: Свойства колонок | Добавил: IZOTOP (16.05.2012) | Автор: Меренков Михаил E W
Просмотров: 447 | Теги: css, свойство, пример, style, Columns | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]