• Страница 1 из 1
  • 1
Как сделать обтекание картинки текстом?
avatar
Админ | Оффлайн
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

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

Пример 1. Обтекание картинок
 
Код
<!DOCTYPE html>
<html>
<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="images/1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">
     Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного
     противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной
     контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава
     потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился
     в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы
     своего взвода. В результате операции были захвачены элементы внеземной культуры, которые
     переданы аналитической группе.</p>
     <h2>Пресс-релиз аналитической группы</h2>
  <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">
     В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось
     психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших
     над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии
     аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в
     состоянии аффекта.</p>
</body>
</html>


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


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


[Сообщение # 1]  
avatar
Админ | Оффлайн
Код
<title>Пример ХТМЛ обтекания картинок текстом</title>
</head>
<body>
<p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху картинки</p>
<p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по середине</p>
<p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст снизу картинки</p>
</body>


[Сообщение # 2]  
avatar
Админ | Оффлайн
Код
<title>HTML текст обтекает картинку справа</title>
</head>
<body>
<img src="../images/2121.png" align="left" width="128" height="128" />
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
</body>


[Сообщение # 3]  
  • Страница 1 из 1
  • 1
Поиск:

close