Как сверстать такой макет?

Question

[Дмитрий Локшин]

Здравствуйте, уважаемые разработчики!

Уже сломал голову, как сделать такой макет


На этапе дизайна со мной ни кто не обговаривал, соответственно начальство теперь хочет так и никак иначе, вот и приходится с этим жить. Потратил кучу времени используя разные варианты: flex, grid и даже float, но реализовать, чтобы указанный блок "проваливался" когда контент становится больше, так и не удалось(((

Буду очень признателен помощи, хотя бы просто подскажите, возможно ли такое сделать? Спасибо!

Answer 1

[Aetae]

Старые добрые флоаты:

Answer 2

[sHARek]

Поковыряйте Masonry

Answer 3

[Алексей]

Используйте гриды и медиазапросы. Если текст добавляется динамически, то на js отслеживать высоту у 3 блока и при достижении определенного значения перестраивать сетку

Comments

[Дмитрий Локшин]

Да, текст добавляется динамически + ко всему прочему это, естественно, адаптивный макет, т.е. при сужении/расширении экрана текст блока 3 меняет свою высоту. Что js'ом высчитывать высоту я сразу подумал, но все таки надеюсь, что есть решение получше, т.к. придется считать высоту при загрузке, а также постоянно при ресайзе, поэтому думаю, что это не самое лучшее решение.

[Антон]

Дмитрий Локшин,

поэтому думаю, что это не самое лучшее решение.

Не самое лучшее решение исполнять прихоти людей, которые ни хрена не разбираются в вопросах.
Объясните, что так не делается и заведомо костыльный результат.

[Дмитрий Локшин]

Антон, Я работаю в компании, очень крупной, а делаю когда "сверху" все уже утвердили. Меня никто не спрашивает нравится мне это или нет, как я это буду делать и т.д. В общем .опа полная((

[Froggyweb]

Дмитрий Локшин, переставлять js ом

Answer 4

[Дмитрий Казармин]

Блок 5 можно дублировать в двух местах и скрывать/показывать в зависимости от разницы в высотах блока 1 и сумм высот блока 2 и 3.
Правда такой вариант подойдет не всегда. Если блок 5 на каждой странице разный.

Вариант Алексей с топорным вырезать/вставить на js тоже имеет право на жизнь в крайнем случае)

Comments

[Алексей]

Я не предлагал его вырезать/вставлять. Блока достаточно одного. Я предложил добавлять/удалять класс у него тем самым перемещая (разметка на гридах позволяет это делать)

Answer 5

[cristalex]

Это конечно очень весело верстать такие макеты. Но дизайнер нарисовал откровенную фигню, а начальник (менеджер) это пропустил. Такое себе решение. Да и целесообразность размещения элементов именно таким образом весьма сомнительна :)