Здравствуйте, уважаемые форумчане!
Я работаю frontend разработчиком, опыт чуть более года, немало задач было решено, но с этой задачей я справится не смог...
Есть 2 блока, высота которых зависит от контента, а ширина равна 100% родителя, по дом структуре они "соседи".
По задумке один из них содержит картинку, второй наполнен текстом, при этом объём текста и высота картинки заранее нам неизвестны. Нужно их наложить друг на друга
таким образом, чтобы родитель выбирал большего из двух детей, и принимал значение его высоты.
Например:
<div class="parent">
<div class="image">тут будет img с картинкой</div>
<div class="text">тут будет пара абзацев</div>
</div>
В результате мы должны получить "пару абзацев" на фоне картинки. Конечно вы сразу скажите дай блоку с классом "parent" position:relative, а блоку "image" position:absolute, и будете неправы. А что если ваша картинка занимает 600 по высоте, а текст всего 200? Ведь по условию задачи, при таком раскладе блок "parent" должен принять высоту в 600. А если текст 900 а картинка 300, "parent" примет высоту 900.
Самое интересное, что я могу решить эту задачу с помощью JS, однако в моей ситуации это недопустимо.
Прошу Вас помочь, ибо я уже сломал голову...