КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Пример 3. Добавление врезки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Плавающие элементы</title>
<style type="text/css">
.incut {
float: left; /* Обтекание врезки по правому краю */
width: 100px; /* Ширина врезки */
background: #fc0; /* Цвет фона */
padding: 5px; /* Поля вокруг картинки */
margin: 5px 10px 5px 0; /* Отступы вокруг рисунка */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<p class="incut">Ut wisi enim ad minim veniam, quis nostrud
exerci taion ullamcorper suscipit lobortis nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>
Результат примера показан на рис. 3.
Рис. 3. Врезка, выровненная по левому краю
При создании врезок следует обязательно указывать ее ширину с помощью width. Иначе размер слоя окажется гораздо шире, чем это требуется.
Расположение слоев по горизонтали
По умолчанию слои выстраиваются по вертикали один под другим, но при помощи свойства floatих можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоев и задать для них float, как показано в примере 4.
Поскольку для второго слоя также применяется обтекание, то добавленный ниже текст помещается справа от слоя. Избежать этого поможет свойство clear, оно отменяет действие float.
Дата добавления: 2015-04-18; просмотров: 72; Мы поможем в написании вашей работы!; Нарушение авторских прав |