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


Example.3.23


<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. Код страницы со смещенным вправо изображением

Закрыть окно




Начало  Назад  Вперед



Книжный магазин