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

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

Блок nav-right , который находится сейчас слева, должен быть прижат к правому краю. Мне нужно что бы у него остался position: fixed , но когда я с ним пытаюсь переместить этот блок к правому краю, то ничего не происходит. Но при этом, когда я убираю position: fixed; , я не могу выставить height: 100%; .

Добавить right: 0px; для .nav-right

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 html5 или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Выравнивание элементов во Flex контейнере

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items . Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content .

A containing element with another box centered inside it.

На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

    — управляет выравниванием элементов по главной оси. — управляет выравниванием элементов по перекрёстной оси. — управляет выравниванием конкретного flex элемента по перекрёстной оси. — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Перекрёстная ось

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column .

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Three items, one with additional text causing it to be taller than the others.

Three items stretched to 200 pixels tall

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch .

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch . Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto , которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch ; у следующего элемента с классом selected установлено align-self: center . Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

Можно попробовать пример ниже, где установлено flex-direction: column .

Выравнивание содержимого по перекрёстной оси — свойство align-content

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Выравнивание содержимого по главной оси

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content . Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content , мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex , применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start . Все свободное место располагается в конце контейнера.

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

Свойство justify-content может принимать те же самые значения, что и align-content .

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between . Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column , то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Three items lined up on the left

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

Three items lined up from the right

В примере ниже свойству property задано значение rtl , которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content , чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Выравнивание и гибкое-направление

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row .

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end . В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction , элементы контейнера выстраиваются в режиме записи вашего языка ( ltr или rtl ).

Diagram showing start on the left and end on the right.

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column . Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Diagram showing start at the top and end at the bottom.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.

Diagram showing start on the right and end on the left.

Diagram showing end at the top and start at the bottom

Использование авто отступов для выравнивания по главной оси

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto .

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Five items, in two groups. Three on the left and two on the right.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right . Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto . Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.

Будущие функции выравнивания для Flexbox

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content .

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap , как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

CSS выравнивает один элемент справа с flexbox

CSS flexbox (Flexible Box Layout Module) – система компоновки элементов. Она состоит из flex-контейнера и flex-элементов – дочерних блоков.

Свойства flex-контейнера

flex-direction Определяет направление главной оси. Возможные значения:

  • row – слева направо (по умолчанию);
  • row-reverse – справа налево;
  • column – сверху вниз;
  • column-reverse – снизу вверх.

flex-wrap Определяет многострочность контейнера. Возможные значения:

  • nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
  • wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
  • wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.

flex-flow Определяет сразу два параметра: flex-direction и flex-wrap.
Например, flex-flow: column wrap; justify-content Определяет выравнивание элементов по главной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу главной оси;
  • center – flex-элементы выравниваются по центру главной оси;
  • space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний – к концу;
  • space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.

Пример align-items Определяет выравнивание элементов по поперечной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу поперечной оси;
  • center – flex-элементы выравниваются по центру поперечной оси;
  • baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
  • stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

align-content Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения:

  • flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – строки flex-элементов прижимаются к концу поперечной оси;
  • center – fстроки flex-элементов выравниваются по центру поперечной оси;
  • space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя – к концу;
  • space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
  • stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Это свойство не работает для однострочного flex-контейнера.

Метод # 1: свойства позиционирования CSS

Применить position: relativeк гибкому контейнеру.

Применить position: absoluteк элементу D.

Теперь этот элемент находится внутри гибкого контейнера.

В частности, элемент D удаляется из потока документов, но остается в границах ближайшего позиционированного предка .

Используйте свойства смещения CSS topи, rightчтобы переместить этот элемент на место.

Одно предостережение в отношении этого метода заключается в том, что некоторые браузеры могут не полностью удалить абсолютно позиционированный гибкий элемент из обычного потока. Это изменяет выравнивание нестандартным, неожиданным образом. Подробнее: Абсолютно позиционированный гибкий элемент не удаляется из обычного потока в IE11.

Пример

Направим главную ось слева направо, задав свойству flex-direction значение row. Прижмем блоки к началу оси. Для этого justify-content установим в значение flex-start:

Результат выполнения кода:

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

по умолчанию text-align margin-left float position display

Длинный абзац с несколькими предложениями.

Заяц

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

наследуется, применяется к блочным элементам.

Заяц

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

, позволяющих сдвигать содержимое вправо.

не наследуется, применяется ко всем элементам.

Заяц

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

не наследуется, применяется ко всем элементам.

Заяцposition: absolute;

вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение

, с помощью свойств

имеет приоритет над свойством

, кроме случаев, когда свойство

не наследуется, применяется ко всем элементам. Элемент со значением

. Также стоит обратить внимание на значение

Заяц

<div>Длинный абзац с несколькими предложениями. <img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;> Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.</div><style>.raz < text-align: right;></style><div href=&#8221;http://shpargalkablog.ru/2016/02/text-align.html&#8221;>Свойство <code>text-align</code></a> наследуется, применяется к блочным элементам. <img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;><br>Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе <code>right</code>, позволяющих сдвигать содержимое вправо.</div><style>.raz img < display: block; margin-left: auto;></style><div href=&#8221;http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html&#8221;>Свойство <code>margin-left</code></a> не наследуется, применяется ко всем элементам. <img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;> У него есть значение <code>auto</code>, которое выравнивает блочный элемент по горизонтали. А именно <code>margin-left: auto;</code> прижимает элемент к правому краю родителя. Это положение может изменяться свойством <code>margin-right</code>. <a href=&#8221;http://shpargalkablog.ru/2012/03/div-po-centru-html.html&#8221;>При <code>margin-left: auto;</code> и <code>margin-right: auto;</code> элемент размещается по центру ширины предка.</a></div><style>.raz img < float: right;></style><div href=&#8221;http://shpargalkablog.ru/2011/05/float-left-div-css.html&#8221;>Свойство <code>float</code></a> не наследуется, применяется ко всем элементам. <img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;> Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.</div><style>.raz < position: relative; >.raz img < position: absolute; right: 0;></style><div href=&#8221;http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html&#8221;>Свойство <code>position</code></a> не наследуется, применяется ко всем элементам. <img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;> <a href=&#8221;http://shpargalkablog.ru/2011/04/css-nalozhenie.html&#8221;><code>position: absolute;</code></a> вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение <code>position</code> отлично от <code>static</code>, с помощью свойств <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>. При <code>direction: ltr;</code> свойство <code>left</code> имеет приоритет над свойством <code>right</code>, кроме случаев, когда свойство <code>left</code> имеет значение <code>auto</code>.</div><style>.raz < display: table;>.raz div < display: table-cell; vertical-align: top; ></style><div <div><a href=&#8221;http://shpargalkablog.ru/2012/04/display-block-inline-css.html&#8221;>Свойство <code>display</code></a> не наследуется, применяется ко всем элементам. Элемент со значением <code>table</code> подобен <a href=&#8221;http://shpargalkablog.ru/2012/01/html-table.html&#8221;>тегу <code>table</code></a>, а <code>table-cell</code> — <code>td</code>.</div> <div><img alt=&#8221;Заяц&#8221; src=&#8221;http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg&#8221; height=&#8221;100&#8243; width=&#8221;86&#8243;></div></div>Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.

Правила для родительского контейнера

justify-content — выравнивание по главной оси

  • flex-start — блоки прижаты к началу главной оси
  • flex-end — блоки прижаты к концу главной оси
  • center — блоки располагаются в центре главной оси
  • space-between — первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве
  • space-around — все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну

align-items — выравнивание по поперечной оси

  • flex-start — блоки прижаты к началу поперечной оси
  • flex-end — блоки прижаты к концу поперечной оси
  • center — блоки располагаются в центре поперечной оси
  • baseline — блоки выровнены по их базовой линии
  • stretch — блоки растянуты, занимая все доступное место по поперечной оси, если заданы min-width или max-width, то они учитываются

flex-wrap — многострочная организация блоков внутри контейнера

  • nowrap — (по умолчанию) блоки располагаются в одну линию с лева на право (или наоборот если rtl)
  • wrap — блоки располагаются в несколько рядов, если не помещаются в одну линию.
  • wrap-reverse — тоже самое что и wrap, но в обратном порядке.

flex-flow — сокращение для flex-direction и flex-wrap

flex-flow: column wrap;

align-content — как ряды блоков будут выровнены по вертикали

align-content — работает только в многострочном режиме.

  • flex-start — ряды блоков будут прижаты к началу контейнера
  • flex-end — ряды блоков будут прижаты к концу контейнера
  • center — ряды блоков будут находится в центре контейнера
  • space-between — первый ряд в начале, последний ряд в конце, остальные равномерно
  • space-around — будут распределены равномерно
  • stretch — (по умолчанию) ряды блоков растянуты, дабы занять все имеющееся пространство.

обновление скрипка

вы можете достичь аналогичного эффекта, установив flex-grow:1 на среднем элементе flex (или стенография flex:1), который будет толкать последний элемент полностью вправо. (демо)

очевидная разница, однако, заключается в том, что средний элемент становится больше, чем это может потребоваться. Добавьте границу к элементам flex, чтобы увидеть разница.

flex-grow:

Свойство позволяет элементам заполнить свободное пространство, имеющееся между ними. По умолчанию все элементы имеют значение flex-grow: 0.

Если мы решим сменить 0 на 1 для всех элементов, то они равномерно растянутся по всей главной оси заполнив все свободное место и приняв при этом одинаковые размеры по ширине.

А вот если вдруг мы хотим сделать один блок больше чем другие, то можно назначить на все блоки 1, а на необходимый 2, собственно, чтобы было понятнее, я попытался это наглядно показать в примере:

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

Если же по какой-то причине тянуть заголовок на всю ширину нельзя, то блоку с номером телефона надо задать margin-left: auto.

Для наглядности блокам добавлены пунктирные границы.

2. Сжатие блоков с длинными словами

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

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

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