Позиционирование перемещаемого объекта

Позиционирование перемещаемого объекта

Перемещаемый объект – это блок, который смещается по строке в левую или правую сторону. Свойство 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>

Это объясняется тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Динамическое позиционирование элементов управления Windows Forms

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

Динамическое позиционирование элементов управления Windows Forms Чтобы завершить эту главу, давайте рассмотрим несколько подходов, которые можно использовать для управления размещением элементов управления в форме. Если при создании типа Form вы предполагаете, что элементы


Продолжение объекта

Из книги AutoCAD 2009 для студента. Самоучитель автора Соколова Татьяна Юрьевна

Продолжение объекта Snap to Extension – привязка к продолжениям объектов.Она необходима в том случае, когда при построении объектов требуется использовать линии, являющиеся временным продолжением существующих линий и дуг. Данный режим можно совмещать с режимом Apparent Intersect с


Позиционирование

Из книги Microsoft Visual C++ и MFC. Программирование для Windows 95 и Windows NT автора Фролов Александр Вячеславович

Позиционирование Чтобы переместить указатель текущей позиции файла в новое положение, можно воспользоваться одним из следующих методов класса CFile – Seek, SeekToBegin, SeekToEnd. В состав класса CFile также входят методы, позволяющие установить и изменить длину файла – GetLength,


Понятия объекта и экземпляра объекта

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Понятия объекта и экземпляра объекта В начале этой главы мы познакомились с типами данных, определяющими саму природу данных и набор действий, которые можно выполнять с этими данными. Так, строковый тип определяет, что данные этого типа представляют собой строки —


Понятия объекта и экземпляра объекта

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Понятия объекта и экземпляра объекта В начале этой главы мы познакомились с типами данных, определяющими саму природу данных и набор действий, которые можно выполнять с этими данными. Так, строковый тип определяет, что данные этого типа представляют собой строки —


1.1. Поиск и позиционирование компонентов

Из книги Визуальное моделирование электронных схем в PSPICE автора Хайнеманн Роберт

1.1. Поиск и позиционирование компонентов Прежде чем приступить к работе, вам необходимо запустить редактор автоматизированного проектирования электросхем SCHEMATICS из Windows 95/98/NT. На рис. 1.1 показан стартовый экран Windows 95/98/NT с указанием пути к редактору проектирования


15.2. Поиск, позиционирование и проводной монтаж компонентов

Из книги AutoCAD 2009. Учебный курс автора Соколова Татьяна Юрьевна

15.2. Поиск, позиционирование и проводной монтаж компонентов По ходу изучения этого раздела вы будете чертить схему, изображенную на рис. 9.13, и убедитесь в том, что редакторы CAPTURE и SCHEMATICS практически не отличаются друг от друга по своим функциям.Шаг 8 Активизируйте окно


Продолжение объекта

Из книги AutoCAD 2008 для студента: популярный самоучитель автора Соколова Татьяна Юрьевна

Продолжение объекта Snap to Extension – привязка к продолжениям объектов.Она необходима в том случае, когда при построении объектов требуется использовать линии, являющиеся временным продолжением существующих линий и дуг. Данный режим можно совмещать с режимом Apparent Intersect с


Продолжение объекта

Из книги CSS3 для веб-дизайнеров автора Сидерхолм Дэн

Продолжение объекта Snap to Extension – привязка к продолжениям объектов.Она необходима в том случае, когда при построении объектов требуется использовать линии, являющиеся временным продолжением существующих линий и дуг. Данный режим можно совмещать с режимом Apparent Intersect с


Перспектива: масштабирование и позиционирование

Из книги Цифровая фотография от А до Я [2-е издание] автора Газаров Артур Юрьевич

Перспектива: масштабирование и позиционирование С газонокосилкой мы сделаем две вещи:1) увеличим ее с помощью преобразования;2) сдвинем ее вниз и вправо.Эти два изменения в сочетании с переходом создадут эффект приближения газонокосилки в сторону зрителя


Освещенность объекта

Из книги Продвижение бизнеса в ВКонтакте [Быстро и с минимальными затратами] автора Румянцев Дмитрий

Освещенность объекта Освещенность объекта съемки прямо пропорциональна яркости источника света. При увеличении яркости света в два раза освещенность предмета также увеличится вдвое. При искусственном свете освещенность зависит от расстояния между источником света и


Глава 8. Позиционирование сообщества

Из книги C++ для начинающих автора Липпман Стенли

Глава 8. Позиционирование сообщества Прежде чем начать продвижение сообщества в ВКонтакте, нужно определиться, для решения каких задач вы его создаете и как будете позиционировать.Основных способов позиционирования сообщества три:1) позиционирование по


Фиксированное позиционирование

Из книги автора

Фиксированное позиционирование Фиксированное позиционирование – разновидность абсолютного позиционирования. Единственным его отличием является то, что контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при