Позиционирование перемещаемого объекта
Позиционирование перемещаемого объекта
Перемещаемый объект – это блок, который смещается по строке в левую или правую сторону. Свойство float определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл.
• left – элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства clear). Свойство display игнорируется, если ему не присвоено значение none.
• right – подобно значению left с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.
• none – блок не перемещается.
Следующее правило перемещает все блоки, порожденные элементом IMG с атрибутом class="icon", влево и устанавливает значение ширины поля равным нулю:
IMG.icon {
float: left;
margin-left: 0;
}
Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.
Листинг 9.14. Пример перемещаемого объекта
<html>
<head>
<title>Глава 9. Пример перемещаемого объекта</title>
<style type="text/css">
img { float: left }
body, p, img { margin: 2em }
</style>
</head>
<body>
<p><img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
Пример текста, у которого нет другого...
</body>
</html>
Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:
<body>
<p>Произвольный текст,
<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
у которого нет другого...
</body>
Это объясняется тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.
Данный текст является ознакомительным фрагментом.