В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег <img>, чтобы иметь базовые знания по изображениям на html страницах.
1. Обтекание с помощью стилей тега <img>
Картинку можно выровнять только оперируя со стилями CSS тега <img>. Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:
<img align=VALUE src="foto1.jpg">
где VALUE может принимать значения
left — выравнивание по левому краю
right — выравнивание по правому краю
bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
top — выравнивание по верхней строке текста
middle — выравнивание по базовой строке текста
Например
<html>
<body>
<p>text text text text text text
<img align="left" src="foto1.jpg">
text text text text text text</p>
</body>
</html>
Вот как это будет выглядеть на странице:
Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.
Вариант 1.1. Через свойство CSS — hspace и vspace Для этого в атрибутах тега <img> добавляем два значения: