|
Разделы сайта
|
Главнаяwm-help.net -> Статьи из журнала -> Программирование -> Обтекание картинки текстом
Обтекание картинки текстом |
||||
|---|---|---|---|---|
Обтекание картинки текстом — один из популярных приемов
верстки веб-страниц, когда изображение располагается по краю окна браузера, а
текст обходит его с других сторон. Для создания обтекания изображения текстом
существует несколько способов, связанных, как с возможностью тегов HTML, так и с
применением стилей. <html> <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. Таблица создает невидимую границу, которая отстоит от самого изображения и не позволяет тексту приблизиться к нему. Размер отступа регулируется шириной и высотой таблицы. Так, в примере, рисунок выравнивается по левому краю, поскольку этот способ выравнивания установлен у таблицы. Горизонтальный отступ от текста до рисунка будет равен разнице между шириной таблицы и шириной изображения. С вертикальным отступом дело обстоит иначе, по умолчанию выравнивание содержимого ячейки происходит по центру вертикали. Так что если параметр 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, не сильно отличаются друг от друга. источник: http://www.htmlbook.ru/content/183.html | ||||
