Обтекание картинки текстом

Дорогие читатели, сегодня я Вам расскажу о том как сделать обтекание картинки текстом.
Почти все кто занимается администрированием сайтов или вёрсткой, сталкивались с этим, а те кто еще не сталкивались с тем как сделать обтекание картинки текстом, этот пост будет полезным, так что читайте дальше.
Есть несколько способов сделать обтекание картинки текстом это с помощью тегов в 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 варианты. А вы?

Яcreated’s blog

Получать обновления ЯcReated’s blog:




Обтекание картинки текстом: 2 комментария

  1. Уведомление: Дайвинг цетнр

Обсуждение закрыто.