Как сделать обтекание картинки текстом

В предыдущей статье мы рассматривали вопрос, в текст, теперь будем учиться делать обтекание картинки текстом.

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:

1. Обтекание картинки текстом средствами HTML;
2. Обтекание картинки текстом средствами CSS;
3. Обтекание картинки текстом средствами редактора Joomla.

Обтекание картинки текстом в HTML

Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху - 5px, справа - 10px, снизу - 5px, слева - 0px.

1. Для выделения фрагмента (блока) в документе в HTML служит элемент
   
   

   …
2. Для определения стиля элемента служит универсальный атрибут

   Доклад лейтенанта Бокатуева

   Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы своего взвода. В результате операции были захвачены элементы внеземной культуры, которые переданы аналитической группе.

   Пресс-релиз аналитической группы

   В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в состоянии аффекта.

   Результат данного примера показан на рис. 1.

   Рис. 1. Текст с иллюстрациями

   Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin , которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.