Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Использование параметра align тега IMG
Выравнивание изображения определяется параметром align тега IMG. Этот параметр задает, возле какого края окна будет располагаться рисунок, одновременно определяя и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, соответственно, обратное ему значение — left. Параметр align часто используют в связке с другими параметрами тега IMG — vspaceи hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 1).
Пример 1. Использование свойств изображения
<html>
<body>
<img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>
Горизонтальный отступ от картинки до текста управляется параметром hspace, он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому рисунок от края окна будет отстоять на значение, указанное этим атрибутом. Чтобы избавиться от данной особенности можно использовать таблицы.
Использование таблиц
Таблицы с невидимой границей — один из популярных способов верстки, который может пригодиться и в случае обтекания изображения текстом. Для достижения нужного результата воспользуемся свойством align тега TABLE, имеющее такое же значение и применение, как и у изображения. Но у таблиц больше параметров для управления их отображением, что дает преимущества по обтеканию текста в сравнении с изображениями (пример 2).
Пример 2. Использование таблицы
<table width=70 height=70 border=0 align=left
cellpadding=0 cellspacing=0>
<tr>
<td><img src=sample.gif width=50 height=50></td>
</tr>
</table>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
Таблица создает невидимую границу, которая отстоит от самого изображения и не позволяет тексту приблизиться к нему. Размер отступа регулируется шириной и высотой таблицы. Так, в примере, рисунок выравнивается по левому краю, поскольку этот способ выравнивания установлен у таблицы. Горизонтальный отступ от текста до рисунка будет равен разнице между шириной таблицы и шириной изображения. С вертикальным отступом дело обстоит иначе, по умолчанию выравнивание содержимого ячейки происходит по центру вертикали. Так что если параметр valign=top у тега TDне задан, отступы по вертикали будут в два раза меньше, чем отступ по горизонтали.
Использование стилей
Для обтекания картинки текстом можно применить параметр float. Значение rightбудет выравнивать изображение по правому краю окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 3).
Пример 3. Использование стилей
<html>
<body>
<img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>
Параметры hspace и vspace, как писалось выше, включать нужно обязательно, иначе текст будет слишком плотно прилегать к изображению. Фактически, способы, показанные в примере 1 и 3, не сильно отличаются друг от друга.
