масштабирование плавающего содержимого для заполнения контейнера

Question

У меня есть HTML-div с фиксированной шириной и высотой, содержащий вложенные div, расположенные с помощью 'float: left'. Я хотел бы масштабировать вложенные элементы div, чтобы они заполняли контейнер (оставляя пробел как обычно после последнего вложенного элемента. Другими словами, я хотел бы, чтобы вложенные элементы были как можно большего размера без переполнения контейнера.

Пример отправной точки:

<div style="position: relative; background-color: blue; border: 1px solid yellow; width: 650px; height: 500px; margin: auto;">
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div>
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div>
    ...
</div>

(стили для краткости)

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

Поскольку CSS не предоставляет средства для автоматического изменения размера плавающего контента таким образом, я делаю это в JavaScript, но не могу найти подходящий алгоритм для вычисления целевого размера div содержимого; Я подозреваю, что мне нужно сделать что-то умное с относительными пропорциями контейнера и элементов содержимого, но я не могу придумать ничего, что могло бы работать ...

Answer 1

Вы можете посчитать количество плавающих элементов div, разделить их по ширине контейнера, а затем вычислить процент для ширины.

Answer 2

Вы можете сделать это, используя только CSS, но только в браузерах, соответствующих стандартам (т.е. не в IE7 или ниже).

Установите свой содержащий div на display: table-row;

Установите каждый из ваших вложенных div'ов в display: table-cell;

Надеюсь, это немного поможет :)