Как сверстать эту секцию?

Question

[Super Star]

Здравствуйте. У меня есть секция что-то вроде галереи(скрин будет приложен). Суть в том что я её наваял ( https://jsfiddle.net/88qr86eb/1/ ), но у меня эта секция выход за пределы родительской секции и вследствие чего на неё налазит секция которая ниже. Подскажите как решить это.

Скажите как адаптивить такую секцию? Если бы было 6 картинок в ряд то можно было бы сделать 6>4>3>2>1, а как быть когда у меня их 5 штук ряд?

Сама секция


Проблемма

Answer 1

[iBird Rose]

просто float:left div'ы. фикс высоту поставь им. тогда плыть ниче не будет, а родителю overflow: hidden

Comments

[Super Star]

Спасибо огромное. сейчас попробуем

[Super Star]

Я извиняюсь за наглость, а не подскажете еще как адаптировать такую секцию?

[iBird Rose]

всмысле? они итак будут падать по одному вниз при уменьшении экрана. или вам как нужно7

[iBird Rose]

или делай не через float: left, а через display: inline-block. тогда ты родителю сможешь указать text-align: center и картинки падая вниз будут по центру. тобишь когда первые упадут в 2 ряда будет по 4 картинки и 2 картинки в 3 ряду по центру

[Сергей ZSA]

iBird Rose: А не проще flexbox для этого использовать чтоб не бороться с пробелами и прочей ерундой?

[Super Star]

Сергей ZSA: 5 строчек которые решили все мои проблемы
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1920px;
margin: auto;

мда...

[iBird Rose]

Андрей Рысь: ой все...

[Super Star]

iBird Rose: )

[Егор Рублёв]

Андрей Рысь: а как же кроссбраузерность?