Плавающий блок на всю оставшуюся ширину

Довольно часто в верстке приходится создавать такую структуру, при которой в родительском блоке горизонтально размещается несколько блоков, чаще всего плавающих. И обычно требуется, чтобы последний блок занимал всё оставшееся место по ширине. До недавнего времени вполне устраивал следующий способ, при котором у нас известна ширина первого блока:

HTML

CSS

Пример

Недостатки этого способа лишь:

  • Нужно задать ширину первому блоку, соответственно такой же отступ второму.

Но недавно столкнулся с такими требованиями:

  • Может быть любое количество плавающих блоков;
  • Не все блоки с фиксированной шириной (есть с минимальным или максимальным значением ширины);
  • Ну и как обычно последний блок должен занимать всё оставшееся место по ширине.

Решение было следующим.

HTML

CSS

Пример

Преимущества:

  • Количество блоков перед плавающим, растягивающимся блоком может быть любое;
  • Ширина блоков может быть неизвестной.

Недостатки:

  • Две лишние обёртки.

Share this post:

Recent Posts