Div со свойством float: выравниваем горизонтально и вертикально при помощи CSS

Четверг, 15 Авг 2013, 8:08 | Рубрика: Web-разработка

Я предполагаю, что мои читатели уже знакомы со свойством float в CSS. Это свойство выхватывает элемент из общего потока и задает для него правое или левое выравнивание относительно основного содержимого страницы: float:right или float:left. А если не знакомы — отправляю вас читать толковые статьи здесь  и здесь. Мы же поговорим о том, как можно дополнительно задать положение элемента div со свойством float.

Однажды, при разработке сайта, я столкнулась с задачей: нужно разместить элемент div со свойством float:right, но так, чтобы он прикрепился не к правому краю строки, а чуть левее — примерно по ее центру.

Для наглядности рассмотрим рисунок.

Элемент div со свойством float прикреплен к правому краю строки:

А здесь элемент div со свойством float находится правее остальных элементов, но не в крайнем правом положении, а примерно в центре строки:

Задача была решена при помощи CSS и свойства относительного позиционирования элемента — Position:relative с отрицательным значением.

Код блока div получился примерно таким:

<div style="float:right;position:relative;left:-100px;">

Параметр -100px смещает наш div левее, чем крайнее правое положение. Количество пикселей для смещения пределяется эмпирически.

Кстати, еще одна возможность позиционировать элемент <div> со свойством float — это вертикальное выравнивание при помощи свойства padding-top.

То есть:

<div style="float:right;padding-top:100px;">

сдвигает наш элемент div на 100 пикселей вниз относительно верхнего края той строки, в которой он находится.

Таким образом, эти два способа выравнивания элемента div со свойством float: горизонтального и вертикального, дают возможность полностью управлять положением блока на веб-странице.

Сайт дня:Для тех, кто собирается в отпуск и хочет забронировать гостиницу через интернет — представляю сайт онлайн бронирования отелей по всему миру. Цена на гостиницу в Праге, Париже, Барселоне, Санкт-Петербурге, а также онлайн бронирование без предоплаты — все это вы найдете на сайте hotels.ru.



Метки записи: , , , , , , , ,

Ваш отзыв

*