| 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: 0 7px 7px 7px; /* Відступи навколо картинки */
}
</style>
</head>
<body>
<h2>Що таке оповідання?</h2>
<p><img src="image/1.jpg" alt="Оповідання" class="leftimg">
Невеликі розміри оповідання вимагають нерозгалуженого, як правило, однолінійного, чіткого за побудовою сюжету. Характери показані здебільшого у сформованому вигляді. Описів мало, вони стислі, лаконічні. Важливу роль відіграє художня деталь (деталь побуту, психологічна деталь та ін.).
Оповідання дуже близьке до новели. Іноді новелу вважають різновидом оповідання. Відрізняється оповідання від новели виразнішою композицією, наявністю описів, роздумів, відступів. Конфлікт в оповіданні, якщо й є, то не такий гострий, як у новелі. Розповідь в оповіданні часто ведеться від особи оповідача.</p>
<h2>Легенда</h2>
<p><img src="images/2.jpg" alt="Легенди" class="rightimg">
Легенда може містити елементи міфу, описувати надприродних чи вигаданих істот, події, персонажів. Також, як і міф, здатна пояснювати походження певних речей і явищ. Однак, на відміну від нього, в легенді не стверджується істинність описуваних подій, а підкреслюється їх вірогідність, недостовірність оповіді. Події легенди мають порівняно невеликий, локальний масштаб на кшталт заснування міста, появи елементів ландшафту, подорожі тощо.</p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Текст з ілюстраціями
Використання властивості float змушує текст щільно прилягати до зображення. Тому в прикладі введено універсальне властивість margin, яке додає відступи між картинкою і текстом. Це властивість одночасно задає відступ зверху, справа, знизу і зліва від фотографій.