Як зробити обтікання картинки текстом?

05.10.2010

Влад Мержевич

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Завдання

Додати зображення на сторінку так, щоб воно обтікало рядом лежачий текст.

Рішення

Обтікання картинки текстом зазвичай використовується для компактного розміщення матеріалу та зв'язку між ілюстраціями і текстом. Саме обтікання створюється за допомогою стильового властивості float, доданого до селектору IMG. Значення left вирівнює зображення по лівому краю, right - по правому. Обтікання при цьому відбувається по іншим, вільним сторонам.

Приклад 1. Обтікання картинок

HTML5CSS 2.1IECrOpSaFx

<!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">
     Вчора під час проведення розвідувальної операції наша група потрапила під напад невідомого ворога в камуфляжному формуванні Аліенів. У результаті ефективної оборони та стрімкої контратаки численна група бойовиків була розгромлена і відкинута. Серед особового складу втрат немає. Бійці розвідувальної групи проявили виняткові навички володіння зброєю. Особливо відзначився в бою взводний Кудряшев&nbsp;М.А., грамотно використовуючи людські ресурси свого взводу. У результаті операції були захоплені елементи позаземної культури, які передані аналітичній групі.</p>
     <h2>Прес-реліз аналітичної групи</h2>
  <p><img src="images/2.jpg" alt="Вчені, що перебувають у стані афекту" class="rightimg">
     У наших секретних лабораторіях в рамках проекту &laquo;Пандора&raquo; розроблялося психотропне озброєння. У результаті нещасного експерименту більшість вчених, що працювали над приладом, потрапили під вплив психотропного випромінювання, і вони, перебуваючи в стані афекту, розібрали прототип на деталі. Можливо, наші вчені до сих пір перебувають в стані афекту.</p>
 </body>
</html>

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

Ілюстрації

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

Використання властивості float змушує текст щільно прилягати до зображення. Тому в прикладі введено універсальну властивість margin, яка додає відступи між зображенням і текстом. Ця властивість одночасно встановлює відступ зверху, справа, знизу і зліва від фотографій.

зображенняплаваючі елементи

Завдання

Рішення

Часті запитання