Как div прижать к правому краю

CSS. Выравнивание блочного элемента по правому краю.

Вчера, на работе, я пытался выровнять блочный элемент по правому краю. Такая задача встречается не часто, но даже когда она встречается, я использую inline-block или float , но можно обойтись без них.

Способ, о котором я расскажу, вам вероятно знаком. Одним из первых у верстальщиков встает вопрос о выравнивании элементов. Часто это центрирование блочных элементов через margin . Но я никогда не видел, чтобы кто-то использовал margin для выравнивания по правому краю. Думаю это из-за недопонимания механизма работы этого свойства со значением auto . Через него можно и по вертикали центрировать, но это тема отдельной статьи.

Демонстрация с тремя выравниваниями через margin .

Для выравнивания блочных элементов по центру, используется метод через margin auto .

Auto в данном случае говорит нам, что расстояние слева и справа блока, рассчитается браузером пропорционально,m основываясь на размере элемента и оставшимся местом. Так если элемент занимает 50% по ширине, боковые отступы станут одинаковыми, по 25%.

Для выравнивания по правому краю, используйте значение auto , но только для левого отступа.

Не забудьте, что элемент должен быть меньше чем у родителя и быть блочным.

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии

Как прижать блок к правому краю?

Но блок вообще никак не хочет переместиться на другую сторону экрана((( Что делать?

• Вопрос задан более трёх лет назад
• 79694 просмотра

Оценить 1 комментарий

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Включи логику.
Ты задал абсолютное позиционирование, вырвав тем самым элемент из потока.
И пытаешься задать ему обтекание.
Внимание вопрос: какие элементы его будут обтекать, если сам элемент вырван из потока?

Вывод: float для твоей задачи не подходит.

Думай дальше. Ты задал позиционирование элементу. Какие свойства задают позицию блоков?
Догадался уже, наверное — top, left, right, bottom.

How to place a div on the right side with absolute position

I’ve a page where a dynamic message box has to be displayed without disturbing the actual page. This message box has to appear at the top right corner of the page overlapping the existing contents.

I’ve tried to use position: absolute but then I’m unable to place it in the right corner. Also I’m unable to use left since I’ve to support responsive design from Bootstrap.

Here is a sample markup

This message box should have a width of 50% with respect to the .container and the left side of the message box should not be overlapped by it. ie we should be able to click/select the contents of the left side.

Как div прижать к правому краю

Язык CSS
Относительное позиционирование.

При относительном позиционировании блока надо задать свойство position:relative и свойства смещения.
Смещение в этом случае будет происходить не относительно «родительского» элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

Результат в браузере:

Теперь второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах.

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

Плавающие блоки

Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать «резиновую» верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align.

Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться.
Возможны три варианта значений:

left — блок прижимается к левому краю, остальные элементы обтекают его с правой стороны;

right — блок прижимается к правому краю, остальные элементы обтекают его с левой стороны;

none — блок не перемещается и позиционируется согласно свойству position.

Сейчас наша страница в браузере выглядит так:

Теперь наша страница в браузере выглядит так:

прижмем блок новостей к правому краю и поставим его в html-документе вместе с меню перед контентом;

проверить, что будет, если у блоков будут одинаковые значения: прижать оба блока сначала к левому, потом к правому краю.

Оба блока слева:

Оба блока справа:

А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим.
Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками.
У этого свойства может быть задано одно из четырех значений:

left — блок должен располагаться ниже всех левосторонних блоков;

right — блок должен располагаться ниже всех правосторонних блоков;

both — блок должен располагаться ниже всех плавающих блоков;

none — никаких ограничений нет, это значение по умолчанию.

Теперь наша страница в браузере выглядит так:

В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали страницу.

зададим сначала размеры и фон для наших блоков;

сделаем блоки menu и content плавающими и левосторонними;

блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком, так, чтобы блок новостей был справа, а текст обтекал бы его слева (не забудьте блок news в html-коде расположить выше текста, т.е. до слова «контент»).

С помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при «резиновой» верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).

Фиксированные блоки

Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет. У фиксированных блоков может быть один недостаток: они могут не поддерживаются старыми версиями Internet Explorer.

Теперь наша страница в браузере при прокрутке выглядит так:

В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.