Как div прижать к правому краю
Перейти к содержимому

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

  • автор:

Как прижать элемент к краю экрана?

5c7bf4fcc7b19152269949.jpeg

Есть контейнер с блоками на 1160px. Внутри есть один блок с картой. На этой ширине он должен тянуться и выходить за пределы контейнера и быть прижатым к правому краю экрана. Но при планшетной версии с контейнером 640px, он должен сжиматься и быть прижатым уже к правому краю этого контейнера.

Красные линии — контейнер, зеленая рамка — то как должна тянуться карта на расширении после 1160px

 
.map-block < padding-top: 30px; background-color: $lighter-grey; &__container < display: flex; >&__map
  • Вопрос задан более трёх лет назад
  • 424 просмотра

Выравнивание по правому краю | CSS

Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.

Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right , позволяющих сдвигать содержимое вправо.

Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto , которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right . При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.

Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .

Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table , а table-cell — td . Также стоит обратить внимание на значение flex .

Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.
  
Свойство text-align наследуется, применяется к блочным элементам. Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо.
  
Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right. При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.
  
Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.
  
Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto.
  
Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table, а table-celltd.

Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.

Как выровнять текст по правому краю

Короткий текст справа

Короткий текст справа

  1. горизонтальное выравнивание html обновлена
  2. вертикальное выравнивание html нечего добавить
  3. выравнивание по ширине html хочу обновить

Как прижать элемент к правому краю css

Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:

  class="wrapper">  class="content">i am a wrapper  class="inside">i am inside    

Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:

.wrapper  /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content  background-color: #38d9a9; height: 200px; position: relative; > .inside  /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к правой границе относительно блока с position: relative*/ right: 0; /* Для примера можем прижать блок и к нижней границе */ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 75px; height: 75px; background-color: #444; > 

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

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

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

1 комментарий

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

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS
Во-первых для кода есть отдельные теги.
Решения вопроса 3

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

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

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

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

PS. Не стесняйтесь включать мозги =) Помогает в решении проблем.

Ответ написан более трёх лет назад
Нравится 12 5 комментариев
NiniCassini @NiniCassini

Господи, новчиек задал вопрос, а из тебя чсв так и полезло. «Включи логику», «не стесняйся включать мозги», аж противно читать.

А зачем тогда этот сервис. Если все включат мозги тогда этот сайт загнется, для того вы тут и сидите, чтобы помочь!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *