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
Просмотров: 30555
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Февраля 2009 09:35
    Андрей
    Слишком простой урок, не очень((
  • 27 Февраля 2009 12:34
    Myp1blka
    орфограф. еррор " Доаустим "
  • 28 Февраля 2009 18:58
    Баяр Жигмитов
    Зато бесплатно! А дарёному коню в зубы не смотрят.
  • 4 Марта 2009 12:28
    nord
    ето полезные уроки - учить нада в тетрадь записывать....кодировки
  • 30 Мая 2009 18:32
    FreeStylerNSK
    В третьем шаге текст на английском. Так и должно быть?
  • 28 Сентября 2011 20:06
    antonzver
    Урок хороший !!! спасибо за статью
  • 10 Декабря 2011 15:04
    Elika
    Отличный урок. Спасибо. Всё подробно описано)
^ Наверх ^