Как заполнить пустоту при работе float?

Question

[hrvasiliy]

Есть главный блок, в котором есть много блоков определенной ширины и высоты с float:left, допустим, ширина блоков 250px, при уменьшении окна браузера, один из блоков "прыгает" вниз, а в верхней строке остается пустое место. Увидел данную реализацию тут. По сути на данном сайте в 5 больших картинок, влазит 6 маленьких ну и т.д. Пробую реализовать на JS, но что-то пока безуспешно, может надо как-то по-другому делать?

Answer 1

[Kir ---]

Если не нужно поддерживать старые браузеры, то лучше посмотреть на flex
Демо

Comments

[hrvasiliy]

Вообще, отлично! Только вот при сужении окна браузера до: 1-я строка 4 блока. 2-я строка 2 блока. На второй строке не происходит сужение, а так замечательно! u.to/dI7ICg

[Kir ---]

hrvasiliy: Ну я по быстрому накидал же :)
Нужно поиграть с минимальной и максимальной шириной, как вам нужно и подобрать такие, что бы устраивало.

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

А по поводу последних блоков, пока ничего в голову не приходит.

[hrvasiliy]

Kir ---: Спасибо. А есть ли еще какие-то варианты? Просто натолкните, если да. Сам почитаю и попробую.

[Kir ---]

hrvasiliy: hrvasiliy: А на twitch сделано следующим способом. Они добавляют каждому элементу класс video и меняют значение width для класса video через скрипт при изменении ширины экрана

[hrvasiliy]

Kir ---: А данный скрипт пишется на JS? Использование jQuery обязательно?

[Kir ---]

hrvasiliy: да на JS. Использование jQuery тут на ваше желание. Написать без jQuery можно легко

Answer 2

[Alexey ZloDeeV]

Ширину блоков в процентах и добавить min-width