Обтекание текстом изображения
Изображение можно окружить текстом средствами HTML, а именно с помощью атрибута align. В настоящее время использовать его не ре- комендуется, однако CSS предлагает полноценную замену этому атри- буту!
Решение
Для реализации обтекания текстом изображения слева или справа ис- пользуется CSS-свойство float, как показано на рис. 9.5.
Код страницы будет таким:
chapter09/float.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Float</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<style type=”text/css”>
.featureimg { float: left; width: 319px;
}
</style>
</head>
<body>
<h1>Chinese-style stuffed peppers</h1>
<img src=”peppers1.jpg” width=”319” height=”213” alt=”peppers”
class=”featureimg” />
<p>These stuffed peppers are lovely as a starter, or as a …</p>
? More paragraphs
</body>
</html>
Рис. 9.5. Обтекание изображения текстом с помощью свойства float
Обсуждение
Свойство float1 удаляет элемент из обычного потока и размещает его у правого или левого края родительского блока. Остальные блочные
На рис. 9.6 показан результат обработки данного кода: теперь между изображением и текстом появился просвет.
Рис. 9.6. После добавления дополнительных отступов справа и снизу документ выглядит привлекательнее
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание колонки, занимающей все доступное пространство по высоте (0)
- Добавление тени к блоку (0)
- Создание макета с тремя колонками средствами CSS (0)
