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

Question

[Наталия]

Добрый день!

Допустим, есть такой код:

<div class="content">
   <div class="content-item_1">
      <img class="img1" src="photo/image1.png" />
      Текст №1. текст текст текст ....
   </div>
   <div class="content-item_2">
      <img class="img2" src="photo/image1.png" />
      Текст №2. текст текст текст ....
   </div>
</div>

Как правильно сделать , чтоб получилось как на изображении

Comments

[Astrohas]

А че тоже абсолютно спозиционировать не вариант?

Answer 1

[HelpSophie]

так: https://jsfiddle.net/xw1eysvj/ ?

Comments

[Наталия]

очень хорошо, только мне нужно, чтобы край нижней картинки (оранжевого цвета на схеме) накладывался поверх края первой картинки (синего цвета на схеме), и при этом, когда текст 1 начинает сужаться, он должен отодвигать нижнюю картинку вниз, а не залезать под нее или за нее.

[snovazabilparol]

Наталия, так: https://jsfiddle.net/3Ly5r1wz/ ?

[Наталия]

snovazabilparol, отлично. Большое спасибо!

[Наталия]

snovazabilparol, чуть поправила центровку текста, так как она не нужна. https://jsfiddle.net/nlynx/3Ly5r1wz/2/