Как сделать что бы элементы не плыли?

Question

[Дмитрий]

Есть вот такой вид в идеале:

Такой вид в реале, если контент неравномерный:

Как сделать что-то на подобии display: flex для контейнера? Флексы юзать не могу, ибо обязательно IE9. Сейчас все построено на float: left.

Answer 1

[Сергей Горячев]

Очевидно же - задать фиксированную высоту для блочков.

Либо задать блокам display: inline-block; vertical-align: top;, там правда трабла будет с промежутками.

А вообще, конечно, самым правильным было бы использовать display: flex; и @supports {}.
Где работает flexbox - будет flexbox, а где нет - обычные inline-block или float left.

Если средствами CSS нельзя, из-за изменения размеров контентом.

Юзайте JS, отлавливайте самый высокий блочок и остальные выравнивайте с ним.
В принципе, JS смена высоты для таких задач - постоянная практика.

Comments

[Дмитрий]

Не знал что это постоянная практика. Спасибо)

[Сергей Горячев]

Дмитрий: сразу не сообразил, попробуйте inline-block

[Сергей Горячев]

Дмитрий: короче, изменил ответ свой полностью на правильный)))

[Дмитрий]

Sergey Goryachev, с инлайнами вот такое получается

[Сергей Горячев]

Дмитрий: vertical-align: top

[Дмитрий]

Sergey Goryachev, ещё раз спасибо)