Дорогие читатели, сегодня я Вам расскажу о том как сделать обтекание картинки текстом.
Почти все кто занимается администрированием сайтов или вёрсткой, сталкивались с этим, а те кто еще не сталкивались с тем как сделать обтекание картинки текстом, этот пост будет полезным, так что читайте дальше.
Есть несколько способов сделать обтекание картинки текстом это с помощью тегов в HTML, с помощью таблиц, с помощью таблиц стилей. И так:
Использование параметра align тега IMG
Выравнивание изображения определяется параметром align тега IMG. Какой параметр align задали с той стороны и будет картинка, а с противоположной текст. Пример:
<body>
<img src=blank.gif width=50 height=50 hspace=10 vspace=10 align=left>Здесь размещаем свой текст много, много, много текста
</body>
hspace и vspace задают отступи от картинки до текста.
Использование таблиц
Мы помещаем наше изображение в таблицу с невидимыми границами, а потом идет текст. Поскольку у таблицы больше параметров управление чем у картинки с предыдущего варианта, то дает этому варианту преимущества. Пример:
<table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0>
<tr>
<td><img src=blank.gif width=60 height=60></td>
</tr>
</table>
И опять текст, текст, текст.
Разница между шириной таблицы и шириной картинки и будут промежутки между текстом и картинкой.
Использование стилей
Здесь я ничего писать не буду, пример похож на самый первый, так что если вы внемательно читали то разберётесь что к ему. Пример:
<body>
<img src=blank.gif width=50 height=50 hspace=10 vspace=10 style=»float: left»>Текст, текст и много текста
</body>
Чем отличается этот пример от первого? А тем, то мы задаем выравнивание с помощью стиля float.
Лично я использую только 1 и 2 варианты. А вы?
Уведомление:
спасибо за комплимент