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


Обтекание текста вокруг изображений


Когда изображения смещаются влево и вправо на странице, последующий текст будет обтекать изображение. Это иллюстрирует рисунок 5.14, где изображение смещается влево, так что подпись к изображению обтекает его справа. В то же самое время следующий далее параграф также обтекает изображение.

Плавающее изображение с обтекающим его текстовым параграфом

увеличить изображение
Рис. 5.14.  Плавающее изображение с обтекающим его текстовым параграфом

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

<p>Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.</p>

<div> <img src="book.gif" alt="Изображение книги" style="float:left; margin-right:10px; margin-bottom:10px"/> <b>Figure 1.</b><br/> <i>The Passion of the Western Mind</i>. </div>

<p>Этот следующий далее параграф также обтекает изображение справа, так как он записывается далее в строке ниже заголовка.</p>

Листинг 5.5. Код для плавающего изображения с обтекающим его текстовым параграфом




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