Здравствуйте! В этой статье я хочу рассказать о таком важном поняти в css как обтекание. Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float, которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.
Это свойство может принимать одно из следующих значений:
-
left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента
-
right: элемент перемещается вправо
-
none: отменяет обтекание и возвращает объект в его обычную позицию
При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.
Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание в CSS3</title>
<style>
.image {
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div class="sidebar">Л. Толстой. Война и мир. Том второй. Часть третья</div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел,
чуть колыхаясь в лучах вечернего солнца...</p>
<p>«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...</p>
</div>
</body>
</html>
Читать далее
Это интересно
0
|
|||
Последние откомментированные темы:
-
Обзор смартфона LG Optimus L9
(1)
hobert
,
01.03.2022
-
Антивирусные приложения Android для защиты устройства
(1)
Наталья_ласточка
,
27.02.2022
-
Как отключить уведомления от Сбербанк за 60 рублей через приложение Сбербанк онлайн и ещё 5 методов!
(1)
bbob
,
15.02.2022
-
Обходим блокировку сайтов.
(3)
Евгений_к
,
07.02.2022
-
Как можно зарабатывать онлайн без вложений
(1)
Vasil
,
20.01.2022
-
Как сделать меню пуск Windows 11 как в Windows 10?
(1)
Vasil
,
30.12.2021
20251118164554