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

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

  • автор:

Как прижать элемент к правому краю 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; > 

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

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

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

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

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

space2pacman

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

delphinpro

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

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

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

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

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

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

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

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

Выравнивание по правому краю | 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 хочу обновить

Как прижать к правому краю многострочного текста другой блок?

Убери флекс у контейнера, и дай дочерним блокам инлайн-блок. Может можно и на флексе прижать, но я в флексах не особо силен.

Решения вопроса 0
Ответы на вопрос 2
text-align: right; ?
Ответ написан более трёх лет назад
true_evzheniy @true_evzheniy Автор вопроса
text-align: left;
true_evzheniy @true_evzheniy Автор вопроса
Задача подвинуть желтый блок, а не текст

Mr_Lagmis

Junior web developer =)

text-align: right;
Задаёшь этот стиль тому тексту, который должен быть справа.
Или в самом тэге прописать атрибут, например

 

Lorem

А если всё-равно не работает, то надо писать весь код, чтобы понять в чём ошибка.
Ответ написан более трёх лет назад
true_evzheniy @true_evzheniy Автор вопроса
Текст слева. Блок справа текста, вплотную к самой правой букве текста
true_evzheniy @true_evzheniy Автор вопроса
зачем ты даешь совет прижать текст вправо?

Mr_Lagmis

true_evzheniy, Аааа.
Ну смотри на следующий код

 
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremv Lorem Lorem Lorem Lorem Lorem Lorem
Block div

Скопируй и вставь себе на страничку и смотря на этот код, напиши, или измени свой так, как тебе надо.

Olek1

Артём Кириллов, сделайте Форк/Клон его кода на сайте jsbin.com, ничего ведь непонятно

Mr_Lagmis

     JS Bin   
Lorem Lorem Lorem Lorem Lorem Lorem
Block div

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

     JS Bin   
Lorem Lorem Lorem Lorem Lorem Lorem
Block div

Olek1

Артём Кириллов, а я так тоже сидел игрался делал, но у вас все слова lorem одинаковой длины, по этому будет красиво, но ведь у него не предполагаются все одинаковые слова

Mr_Lagmis

Olek1, Так можно изменить по своему!
Вот многострочный, с разными словами:

     JS Bin   
Как прижать к правому краю многострочного текста другой блок? Именно к самой правой букве. Текст может меняться. Есть подозрение, что решения нет.
Block div

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

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