Как реализовать «выпирание» блока с текстом, из блока с картинкой?

Question

[Eduard Shkuta]

Сейчас сверстал макет и там была вот такая "фича"

Как видно на картинке, блок с текстом выпирает из блока с картинкой. Я это кое-как реализовал и сделал адаптивным, но осталось ощущение, что можно было реализовать это гораздо проще. Так вот хотел спросить у людей, которые верстали подобные "элементы", как лучше всего это реализовать и сделать при этом адаптивным? Не прошу готовый код, хотелось бы просто увидеть примеры и повысить свой скилл в решение таких проблем))

Comments

[Ankhena]

Проще всего абсолютами.

Альтернативы: фоном, гридами, отрицательным margin...

[fallus]

position: absolute;
right: 0;
top: 50%;
transform: translate(-50%, -50%)

[Eduard Shkuta]

Ankhena, Я реализовал абсолютами, но при уменьшении экрана - сперва смещаются блоки с текстом во внутрь блока с картинкой, а хотелось бы, чтобы сначала уменьшалось расстояние между картинками, а потом уже смещение текста происходило. Много чего перепробовал но так и не добился результата.

[Ankhena]

Эдуард Шкута, не знаю, как у вас сделано расстояние между картинками. Я вижу несколько вариантов, а гадать не хочется. Покажите что есть и как должно быть.

[Eduard Shkuta]

Только что потыкал код и вроде как понял, как это должно работать правильно: так как ширина и высота картинки и ширина блока с текстом - фиксированные относительно контейнера, то нужно трём основным элементам задать фиксированную ширину (ширина картинки + половина ширины блока с текстом) и поместить всё это во flex-контейнер с justify-content: space-between

Может есть способ куда проще)) будем искать))

[Ankhena]

Эдуард Шкута, если размеры фиксированы, то проще уже некуда.

[Eduard Shkuta]

Ankhena, видимо то, что я верстал сайт уже несколько дней подряд, плохо повлияло на моё мышление))