Обтекание картинок текстом в HTML
Обтекание картинок текстом в HTML — размещение картинок на веб-странице по левому или правому краю страницы таким образом, чтобы их обтекал текст. Дополнительной задачей является возможность сделать так, чтобы текст обтекал еще и подпись к изображению.
Содержание |
[править] Описание
Изображение без подписи снабжают атрибутами align="left" или align="right" тега img, а чтобы обеспечить отступ от текста по горизонтали и вертикали на указанное число пикселей, используют числовые атрибуты hspace и vspace, соответственно.
<img src="name.gif" align="right" hspace="10" vspace="8">Изображение в этом примере будет смещено вправо, а текст будет его обтекать сверху, слева и снизу. Этот способ обтекания изображений работает, например, в LiveJournal.
Для изображения с подписью этот способ не работает, и целесообразно заключить картинку и ее описание в блок div, например, так:
<div style="width: 255px; clear: right; float: right; position: relative; border: 1px solid gray; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; padding: 10px; background-color: lightgray"> <img width=250 height=392 src="name.png" > Подпись к картинке </div>
Этот способ должен работать и в простом HTML (например, на narod.ru), и в коде MediaWiki, и в LiveJournal (для последнего нужно располагать весь тег div на одной строке, иначе в середину тега движок LiveJournal добавит переводы строки <br>).
[править] Использование CSS
Чтобы сократить этот код, можно вынести «багаж» параметров в класс CSS:
<div class="floatleft" style="width:255px"> <img width=250 height=392 src="name.png" > Подпись к картинке </div>
А в стилевом описании CSS (в начале кода HTML-страницы или во внешнем файле CSS) определить сами стилевые классы floatleft (изображение слева страницы) и floatright (справа):
<style type="text/css"> .floatright{ clear: right; float: right; position: relative; border: 1px solid gray; margin-left: 20px; /*внешний отступ*/ margin-top: 20px; /*внешний отступ*/ margin-bottom: 20px; /*внешний отступ*/ padding: 10px; /*внутренний отступ*/ font-size: small; text-align: center; font-weight: bold; } .floatleft{ clear: left; float: left; position: relative; border: 1px solid gray; margin-right: 20px; /*внешний отступ*/ margin-top: 20px; /*внешний отступ*/ margin-bottom: 20px; /*внешний отступ*/ padding: 10px; /*внутренний отступ*/ font-size: small; text-align: center; font-weight: bold; } </style>
Вместо определения стилевого класса можно просто проставить css-код в атрибут style нужного изображения
[править] Вики
В викидвижках проблемы с обтеканием картинок текстом, как правило, не возникает, потому что эта возможность встроена в механизм описания картинок и реализуется викикодом вида:
[[Файл:file.png|thumb|right|300px|Описание картинки]]
Здесь thumb-признак обтекаемой картинки, left (или right) — признак, куда ее выравнивать, а 300px — ширина отмасштабированной картинки в пикселях.
[править] Прерывание обтекания
Если обтекание в каком-то месте нежелательно (например, возникает нагромождение картинок и таблиц, которые наезжают друг на друга) можно использовать тег <br clear="all"/> для прерывания обтекаемого текста. Также можно использовать css-свойство clear.
Другой способ избежать нагромождения — использование HTML-таблиц.
| Обтекание картинок текстом в HTML относится к теме «HTML» |