Выравнивание плавающих DIVs в гибком контейнере

Question

У меня есть набор левых плавающих DIV внутри гибкого контейнера (часть # 1), когда размер контейнера изменяется таким образом, что он не может содержать все DIV в одной строке вместо поведения по умолчанию (2) I хотите, чтобы строки были идеально выровнены, поддерживая пробелы там, где это необходимо (табличное поведение), как показано в части № 3.

Можно ли сделать это, используя только CSS и HTML?

Answer 1

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

А если вас интересует причина :

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

Если вы заранее знаете, насколько широким будет контейнер, вы можете установить для каждого :nth-child() значение clear:left, отображаемое в строке.

в скрипке можно добавить:

div:nth-child(3n)
{
  clear: left;
}

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

Answer 2

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

По сути, оберните каждый из div в другой div и установите для свойства min-height значение самого большого div, которое вы ожидаете увидеть.

Это должно привести к # 3.

Также проверьте взлом минимальной высоты для IE 7 - Быстрый взлом мин-высоты

Answer 3

Первое, что приходит на ум, - это обернуть каждую ячейку в div одинакового размера, который выполняет плавание и имеет прозрачный фон.