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

Question

[Максим]

Доброго времени суток.
Помогите советом пожалуйста.
Опыта пока очень мало.

Нужно адаптивно сверстать вот такой блок с элементами.
Наверняка есть какой-то проверенный надёжный способ решения такой задачи.
Поделитесь опытом плз.

Сейчас пока в голове только сделать какие-то такие обёртки и играться с медиавыражениями и с ширинами каждого из элементов. Наверняка это не самое хорошее, и даже ущербное "решение".

Собственно, подскажите как лучше сделать или что именно погуглить.

Спасибо! :)

Answer 1

[ZERGE]

Например Masonry desandro.com/#masonry

Comments

[Максим]

ZERGE Спасибо большое! Похоже это то что нужно! Осталось теперь разобраться со всем этим)

[Андрей Федоров]

Максим: Использовать masonry, где можно обойтись простейшим кодом html+css это, извините, чушь, хотя бы потому что вы меняете 20 строчек на 20 кб.

[ZERGE]

Андрей Федоров: пусть автор сам выбирает

[Максим]

Андрей Федоров: Попробую просто html+css))
Не уверен что сейчас вообще разберусь в этом masonry)) Но примеры решения на этом masonry выглядят круто)

[Ankhena]

Максим: masonry логично использовать, когда размеры блоков заранее неизвестны, зависят от контента. В вашем случае, похоже, это не так.

Answer 2

[Андрей Федоров]

Не нравятся обертки - сделайте таблички. codepen.io/aliencash/pen/evJwmx
ps: )))

Comments

[Максим]

Андрей Федоров
Спасибо, думаю это хорошее решение)
Но, видимо я не совсем чётко изложил требования к вёрстке)
К сожалению, нужно что бы блоки уезжали друг под друга в момент, когда уже совсем плохо смотрится)
Если можно поинтересуюсь.
Что-то подобное можно реализовать на таблицах? Типа с display: table display: table-cell итд?)

[Иван Антонов]

Максим: на таблицах адаптивную верстку сейчас никто не делает, кроме извращенцев.

[Андрей Федоров]

Максим: Потому надо давать несколько картинок, как себя должно вести на разных разрешениях. Чтобы мы тут не проявляли чудеса телепатии.

[Иван Антонов]

Андрей Федоров: он сам еще не определился с расположением)

[Максим]

Да, сорян, не совсем чётко изложил суть :)