Обтекание картинок текстом в 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»   ±