Верстка: как правильно сверстать 5 элементов-изображений с текстом на них?

Question

[AdTheBisto]

Тренируюсь верстать, нашел в интернете готовый макет, и запоролся на этом моменте (см. приложенное изображение).
Есть 5 отдельных элементов: 4 изображения-блока, на которых размещается определенный текст + ветка, к которой прикрепляются эти самые блоки с текстом. Все эти элементы отдельными .png файлами идут.
Честно говоря, не могу понять, как правильно сверстать данный элемент адаптивно, т.е. жесткой фиксацией не подходит, если через абсолютное позиционирование блоки с текстом сьезжают вместе с изображением.

Comments

[dom1n1k]

Вопрос не имеет ответа до тех пор, пока вы не определите желаемый механизм адаптивности (что, вообще говоря, забота дизайнера, а не верстальщика). А также ограничения, налагаемые на тексты в блоках, если они вообще есть.

Answer 1

[Юпитер Макс]

основной блок с фикс высотой и position:relative; , потом эти элементы с абсолютной позицией

Comments

[Lord_Dantes]

жеска

[Юпитер Макс]

Django Man, предложи мягко ))

[kupurim]

Текст не обязательно на аблолют вешать, можно обойтись инлайн-блоком + отступы.
А картинка уже на абсолюте. И без фиксированной высоты будет.
Но вот в адаптиве нужно будет извращаться, или скрывать картинку.

Answer 2

[shmatuan]

3 столбика
1 - все текстовые облака, opacity: 0 для 2n
2 - картинка (скорее всего position: absolute и по центру)
3 - все текстовые облака, opacity: 0 для 2n+1

Главное что бы по высоте всегда были одинаковые, что бы с точек не слетали
Иначе придётся всё канвасом делать

Answer 3

[Ольга Ветер]

блоки с текстом можно оформить через css, без картинок. будет гораздо адаптивнее. а все в целом - посмотрите тут примеры https://freefrontend.com/css-timelines/, должно помочь.