Разделы

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Обтекание</title>
  <style type="text/css">
   .leftimg{
     float:left; /* Выравнивание по левому краю */
     margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg {
    float: right; /* Выравнивание по правому краю */
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }
  </style>
 </head>
 <body>
  <h2>Доклад лейтенанта Бокатуева</h2>
  <p><img src="1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">
  Вчера во время проведения разведоперации наша группа подверглась нападению 
  неизвестного противника в камуфляжной форме Алиенов. В результате эффективной 
  обороны и стремительной контратаки многочисленная группа боевиков была смята и  
  отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили  
  недюжие навыки владения оружием. Особо отличился в бою взводный 
  Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы 
  своего взвода. В результате операции были захвачены элементы внеземной культуры, 
  которые переданы аналитической  группе.</p>
  <h2>Пресс-релиз аналитической группы</h2>
  <p><img src="2.jpg" alt="Ученые, находящиеся в 
  состоянии аффекта" class="rightimg"> В наших секретных 
  лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось  
  психотропное оружие. В результате неудачного эксперимента большинство ученых, 
  работавших над прибором, подверглись воздействию психотропного излучения, и они, 
  находясь в состоянии аффекта, растащили прототип по деталям. 
  Возможно, наши ученые до сих пор находятся в состоянии аффекта.</p>
 </body>
</html>

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

Рис. 1

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

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

Об этом и других стилевых атрибутах можно узнать из учебника css

Гость, 13.12.2008

Спасибо за статью, как раз то что искал, все понятно и полно изложено.

Валентин, 11.04.2009

Большое спасибо!

Rumus, 17.12.2009

Спасибо помогло вроде мелочь а приятно....

Верка, 04.02.2010

Спасибки,то,что искала)

Сергей, 21.02.2010

А нельзя ли показывать сразу нормальную разметку? А то, честное слово, складывается впечатление, что это текст для ГС. У нормальных блоков, и текст по ширине лежит ровно. Так, что блок выглядит завершенным, а не обгрызенным...

LongMan, 20.10.2010

Большое спасибо!

Lucky, 05.11.2010

Спасибо, помогло.

Разделы

Термины

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

Отправить комментарий