Студопедия — Плавающие элементы
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Плавающие элементы






По умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит CSS атрибут float. Он задает, по какой стороне будет выравниваться элемент: левой (left) или правой (right).

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

Пример:

<html>;

<head>;

<title>Плавающие элементы</title>;

<style>;

DIV#floating {

float: left;

}

</style>;

</head>;

<body>;

Per Apollinem medicum et Aesculapium, Hygiamque et Panaceam

juro, deos deasque omnes testes citans, mepte viribus

et judicio meo hos jusjurandum et hanc stipulationem

plene praestaturum.<br>;

<div id="floating"><img src="Hippocrates_rubens.jpg";

width="120" height="168"></div>;

Illum nempe parentum meorum loco habiturum spondeo, qui

me artem istam docuit, eique alimenta impertirurum, et

quibuscunque opus habuerit, suppeditaturum.<br>;

Victus etiam rationem pro virili et ingenio meo aegris

salutarem praescripturum a pemiciosa vero et improba

eosdem prohibiturum. Nullius praeterea precibus

adductus, mortiferum medicamentum cuique propinabo,

neque huius rei consilium dabo. Caste et sancte colam et

artem meam.<br>;

</body>;

</html>;

Контейнер DIV стремится к левому краю документа, а с остальных трех сторон он обтекается текстом

 

Еще одним свойством, связанным с плавающими элементами, является clear. Clear запрещает обтекание элемента с левой (left), правой (right) или с обеих сторон (both). По умолчанию значение – none – обтекание разрешено.

 

Пример:

<html>;

<head>;

<title>Clear</title>;

<style>;

DIV {

border: solid black 1px;

width: 75px;

}

DIV.floating {

float: left;

}

</style>;

</head>;

<body>;

<div class="floating">Блок 1</div>;

<div class="floating">Блок 2</div>;

<div style="clear: both">Блок с запретом обтекания</div>;

<div class="floating">Блок 3</div>;

<div class="floating">Блок 4</div>;

<div class="floating">Блок 5</div>;

</body>;

</html>;







Дата добавления: 2015-09-04; просмотров: 375. Нарушение авторских прав; Мы поможем в написании вашей работы!



Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...

Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...

Педагогическая структура процесса социализации Характеризуя социализацию как педагогический процессе, следует рассмотреть ее основные компоненты: цель, содержание, средства, функции субъекта и объекта...

Типовые ситуационные задачи. Задача 1. Больной К., 38 лет, шахтер по профессии, во время планового медицинского осмотра предъявил жалобы на появление одышки при значительной физической   Задача 1. Больной К., 38 лет, шахтер по профессии, во время планового медицинского осмотра предъявил жалобы на появление одышки при значительной физической нагрузке. Из медицинской книжки установлено, что он страдает врожденным пороком сердца....

Типовые ситуационные задачи. Задача 1.У больного А., 20 лет, с детства отмечается повышенное АД, уровень которого в настоящее время составляет 180-200/110-120 мм рт Задача 1.У больного А., 20 лет, с детства отмечается повышенное АД, уровень которого в настоящее время составляет 180-200/110-120 мм рт. ст. Влияние психоэмоциональных факторов отсутствует. Колебаний АД практически нет. Головной боли нет. Нормализовать...

ТЕРМОДИНАМИКА БИОЛОГИЧЕСКИХ СИСТЕМ. 1. Особенности термодинамического метода изучения биологических систем. Основные понятия термодинамики. Термодинамикой называется раздел физики...

Травматическая окклюзия и ее клинические признаки При пародонтите и парадонтозе резистентность тканей пародонта падает...

Подкожное введение сывороток по методу Безредки. С целью предупреждения развития анафилактического шока и других аллергических реак­ций при введении иммунных сывороток используют метод Безредки для определения реакции больного на введение сыворотки...

Studopedia.info - Студопедия - 2014-2024 год . (0.013 сек.) русская версия | украинская версия