CSS3: позиционируемые плавающие контейнеры | phpBB | Блог разработчиков phpBB
Блог разработчиков и поклонников phpBB
CSS3: позиционируемые плавающие контейнеры
Воскресенье, Май 6th, 2012
Нет комментариев
Продолжаем рассматривать новые возможности языка CSS3. На этот раз разговор пойдёт о позиционируемых плавающих контейнерах, чья поддержка появилась в 10 Platform Preview 2.
Плавающие контейнеры, как мы знаем, отличаются от обычных контейнеров тем, что не выводятся в основном потоке текста, а выносятся из него и сдвигаются к левому или правому краю родительского элемента веб-страницы. Остальное содержимое родителя при этом будет обтекать плавающий контейнер, соответственно, справа или слева. В результате мы получим нечто похожее на типографскую врезку.
На рис. 1 показан такой плавающий контейнер, сдвинутый к правому краю своего родителя самой веб-страницы. Чтобы сделать плавающий контейнер более заметным, автор задал для него размеры и жёлтый цвет фона.
Рис. 1. Плавающий контейнер, сдвинутый к правому краю веб-страницы
Чтобы превратить обычный блочный контейнер (тег DIV ) в плавающий, достаточно привязать к нему стиль, в котором указать атрибут стиля float. Значение left этого атрибута стиля создаёт плавающий контейнер, прижатый к левому краю родителя, а значение right прижатый к его правому краю. Значение же none заставляет контейнер вести себя как обычно, то есть выводиться в общем потоке текста (это, кстати, значение по умолчанию).
source
Комментариев нет:
Отправить комментарий