Основы работы с XHTML и CSS

Плавающие изображения



Рис. 5.12.  Плавающее изображение

Изображения можно смещать влево или вправо на странице (окружающий текст при этом будет обтекать изображение), используя стиль float:left или float:right внутри тега <img/>. Вокруг изображения можно разместить дополнительные пробелы, чтобы отделить его от окружающего текста с помощью увеличения полей. Соответствующее изображение смещается вправо и имеет значение левого поля в 25 пикселей, чтобы оставить свободное пространство между изображением и этим параграфом.

<p> <img src="Earth.gif" alt="Изображение Земли" style="float:right; margin-left:25px"/> ... окружающий текст с переносом по словам ... </p>

Листинг 5.4. Код для смещения изображения на странице вправо (html, txt)

Вспомните: когда изображения или другие элементы страницы смещаются влево или вправо на странице с обтекающим их текстом, сначала кодируется тег <img/>, а за ним следует обтекающий текст.



Содержание  Назад  Вперед