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

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

В примере 1 введены два стилевых класса leftimg и rightimg, при добавлении их к <img> картинка выравнивается по соответствующей стороне, а текст при этом обтекает картинку.

Пример 1. Обтекание картинок

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
  <style>
   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }
  </style>
 </head>
 <body>
  <h2>Доклад лейтенанта Бокатуева</h2>
  <p><img src="image/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">
  Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного 
  противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной 
  контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава 
  потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился 
  в бою взводный Кудряшёв&nbsp;М.А., грамотно использовавший человеческие ресурсы 
  своего взвода. В результате операции были захвачены элементы внеземной культуры, которые 
  переданы аналитической группе.</p>
  <h2>Пресс-релиз аналитической группы</h2>
  <p><img src="image/n2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">
  В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось
  психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших 
  над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии 
  аффекта, растащили прототип по деталям. Возможно, наши учёные до сих пор находятся в 
  состоянии аффекта.</p>
 </body>
</html>

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

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

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

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

Изображения