CSS свойство float на примерах. Часть 1.

Шаг 1. Начнем с того, что у нас есть изображение и параграф текста.

Допустим мы хотим добиться того, чтобы наше изображение находилось справа, а текст обтекал его. Мы также хотим добавить к нашему изображению отступы с левого края и снизу, чтобы текст не прилипал к картинке. И наконец, мы хотим создать рамку вокруг изображения.

Итак, вот исходная позиция:

Шаг 2 - применяем свойство float: right к нашему изображению.

Чтобы принудительно заставить изображение перейти к правому краю мы применяем к нему класс .floatright, в который прописываем правило float: right.

Что из этого получилось, смотрите на примере ниже:

Шаг 3 - добавляем отступы

Отступы нужны для того, чтобы отодвинуть текст от изображения с левого и нижнего боков.

Мы будем использовать короткий вариант записи правила, регулирующего отступы: "margin: 0 0 10px 10px;". Помните, что при такой записи, значения применяются в таком порядке - верх, право, низ, лево.

На данный момент у нас такая ситуация:

Шаг 4 - Добавляем рамку

Чтобы добавить рамку к изображению, мы используем правило: "border: 1px solid #666;".

Шаг 5 - Добавляем внутренние отступы

Если Вы хотите, чтобы рамка прилегала к картинке неплотно, то Вы можете использовать внутренние отступы, добавив правило: padding:2px;

Итоговый результат:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css.maxdesign.com.au
Перевел: Евгений Попов
Урок создан: 24 Февраля 2009
Просмотров: 31619
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^