Основы работы с XHTML и CSS
Плавающие изображения
Альтернативой размещению изображения в отдельной строке является размещение его у левого или правого поля, позволяя тексту заполнять остающееся пространство. Изображение называют "плавающим" слева или справа от сопровождающего его текста. Плавание изображения обеспечивается свойством стиля float.
| float | left right none |
Изображение на рисунке 3.9 выводится у правого поля страницы (float right). Сопровождающий текст параграфа заполняет оставшееся свободным пространство. Задание стиля содержится во встроенной таблице стилей.
Рис. 3.9. Плавающее изображение
<head> <title>Плавающее изображение</title> <style type="text/css"> body {margin:20px} p {text-align:justify} h2 {text-align:center} img {float:right; margin-left:25px} </style> </head>
<body>
<h2>Плавающие изображения</h2>
<p> <img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/> Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице. </p>
<p>Помните, что важно помещать тег <img> в коде сразу перед текстом или другими элементами страницы, которые дополняют изображение. Изображение смещается точно в то место на странице, в котором кодируется тег <img/>. В данном случае тег помещается в начале первого параграфа; поэтому изображение смещается вправо от этого параграфа. </p>
</body>
Листинг 3.23. Код страницы со смещенным вправо изображением (html, txt)
Отметим, что свойство float ассоциировано с селектором img в предыдущей таблице стилей. Это свойство тега <img/> - тег будет плавающим, в отличие от случая, когда на строке размещается только изображение, которое выравнивается свойством text-align охватывающего тега <p>.
Изображения, которые смещаются на странице влево или вправо, должны кодироваться сразу перед текстом, который окружает изображение. В приведенном выше примере тег <img/> находится в начале параграфа, который окружает изображение. Между изображением и окружающим контентом нет никаких символов переноса строк. Тегу <img/> присвоено свойство стиля float:right, чтобы поместить у правого поля охватывающего параграфа. Он имеет также параметр стиля margin-left:25px, чтобы оставить пустое пространство между изображением и окружающим текстом слева.
Изображения могут смещаться на странице влево или вправо; они не могут находиться в середине страницы с текстом, окружающим их с обеих сторон. Для плавающих изображений желательно обычно включать дополнительное пустое пространство между изображением и окружающим его текстом, расширяя его поля. Подобно большинству свойств стиля оформления свойство float может применяться для множества других тегов. В дальнейшем мы узнаем, как смещать текстовые контейнеры на странице влево или вправо.
В примере выше все теги оформляются с помощью вложенной таблицы стилей. Хотя это и не показано, но все другие появляющиеся на этой странице теги <p>, <h2> и <img/> будут получать такие же характеристики оформления.
