Заполнение оставшейся ширины контейнера CSS

В сценарии, где у вас есть заголовок с тремя элементами, расположенными в ряд, цель состоит в том, чтобы средний элемент занимал оставшееся пространство в заголовке. Для достижения этой цели эффективным оказывается сочетание отображения встроенных блоков и функции Calc() в CSS.

Решение кода

Предоставленная структура HTML состоит из заголовок, содержащий изображение, средний элемент с текстом и правый элемент. Чтобы манипулировать их макетом, мы применяем CSS следующим образом:

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

Объяснение

• Inline-Block: Отображение элементов в виде встроенных блоков гарантирует, что они останутся на одной строке и будут вести себя как блоки элементы, позволяющие регулировать ширину и высоту.
• calc() Функция: Эта функция выполняет математические операции по значениям CSS. В этом случае мы вычисляем оставшуюся ширину, вычитая фиксированную ширину левого элемента (100 пикселей) из 100%.

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

Альтернатива Решение

Если вы предпочитаете, чтобы между элементами div был пробел, вы можете изменить CSS, установив размер шрифта внешнего элемента (заголовка) равным 0:

header {
  font-size: 0;
  ...
}