Один из способов заставить элемент переместиться в нужное нам место это использовать CSS свойство float, оно позволяет выровнять наш элемент на странице, как по левому, так и по правому краю. При этом элемент, к которому применяется это свойство, становится плавающим, а это приводит к тому, что содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать плавающий элемент.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример работы с плавающими элементами</title>
<style>
img {
width: 30%; /* ширина 30% от родительского элемента */
}
h2 {
text-align: center; /* выравниваем заголовок по центру */
}
.floatLeft {
float: left; /* элемент становится плавающим и смещается по левому краю */
padding: 5px 5px 5px 0; /* устанавливаем внутренние отступы для всех сторон */
}
.floatRight {
float: right; /* элемент становится плавающим и смещается по правому краю */
padding: 5px 0 5px 5px; /* устанавливаем внутренние отступы для всех сторон */
}
p {
text-align: justify; /* горизонтально выравниваем элементы по ширине */
}
</style>
</head>
<body>
<h2>Панды</h2>
<img src = "panda1.jpg" class = "floatLeft" alt = "Изображение маленькой панды" title = "Изображение маленькой панды">
<p>Большая панда, или бамбуковый медведь (лат. Ailuropoda melanoleuca) — вид млекопитающих из семейства медвежьих (Ursidae) со своеобразной чёрно-белой окраской шерсти, обладающих некоторыми признаками енотов. Единственный современный вид рода Ailuropus подсемейства Ailuropodinae.</p>
<img src = "panda2.jpg" class = "floatRight" alt = "Изображение большой панды" title = "Изображение большой панды">
<p>Большие панды обитают в горных регионах центрального Китая: Сычуань и Тибет.
Со второй половины XX века панда стала чем-то вроде национальной эмблемы Китая. Его западное имя происходит от малой панды. Раньше его также называли пятнистым медведем</p>
</body>
</html>
И так, что мы сделали в нашем примере:
- Горизонтально выровняли два наших абзаца по ширине (text-align: justify).
- Создали класс .floatLeft, в котором указали, что элементы позиционируются (выравниваются) по левому краю, т.е. остальные элементы будут обтекать элемент по правому краю. Для того, чтобы текст не был вплотную к изображению установили внутренние отступы элемента равными 5px для всех сторон, за исключением левой: padding: 5px (Top) 5px (Right) 5px (Bottom) 0 (Left);
- Создали класс .floatRight, в котором указали, что элементы позиционируются (выравниваются) по правому краю, т.е. остальные элементы будут обтекать элемент по левому краю. Для того, чтобы текст не был вплотную к изображению установили внутренние отступы элемента равными 5px для всех сторон, за исключением правой: padding: 5px (Top) 0 (Right) 5px (Bottom) 5px (Left);
Результат нашей работы:
С помощью CSS свойства float Вы можете не только перемещать изображения к одной из сторон экрана, но и управлять размещением любых других элементов на странице: меню навигации, боковые панели, рекламные блоки и тому подобное. У данного свойства может быть всего три значения, два из которых мы рассмотрели выше (left и right), а третее значение none, считается значением по умолчанию для всех элементов (элемент не является плавающим и отображается там, где он расположен в потоке документа).
Важным моментом в понимании как работают плавающие элементы, является то, что если плавающий элемент находится внутри контейнера (другого элемента) и для контейнера заданы определенные значения ширины, то перемещение плавающего элемента будет осуществлено к указанному краю внутри этого контейнера, а не по отношению к окну браузера.
Создать структуру сайта с использование плавающих элементов.
