Выровняйте дочерний div над родителем справа, не перекрывайте

Ответ 1

вы можете использовать calc() в .parent вместе с position:absolute в .child, и, читая ваши комментарии, у него не будет проблемы со вторым родителем, имеющим контент.

.container {
  border: 1px solid green;
  position: relative;
  min-height: 200px;
}
.parent {
  max-width: calc(100% - 220px)  /* img width + some margin */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.
  </div>
  <div class="parent">
    <div class="child">
      <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
    <p>Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.</p>
    <p>Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.</p>
  </div>
</div>

Ответ 2

Вы можете установить отображение родительских divs в table-cell:

.parent {
  display:table-cell;
  vertical-align:top;
}

Пример jsFiddle

Ответ 3

Если вы работаете с фиксированным размером для изображения, вы можете создать псевдоэлемент в .container с плавающей запятой и удерживая пространство для изображения.

Затем установите .child div в position: absolute, поместив его в верхний правый угол, где псевдоэлемент удерживает пространство:

.container {
  border:1px solid green;
  position: relative;
}

.container::before {
  content: "";
  width: 200px;
  height: 200px;
  float: right;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
    
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
    
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

</div>

Ответ 4

Я предлагаю только 1 строку изменения здесь, в вашем коде, который исправит все. Смотрите здесь скрипку.

https://jsfiddle.net/jyz8vw9q/5/

Это все изменения

.container {
  border:1px solid green;
  display: flex;
}

Ответ 5

Я попробовал что-то с вертикальным выравниванием и отображением встроенной таблицы

.parent{
  display: inline-table;
  vertical-align: top;
  width: 50%;
}
.child {
  float:right;
}

https://jsfiddle.net/jyz8vw9q/6/

Ответ 6

Если я правильно вас понимаю (вы написали " выше" ), вы можете дать ребенку DIV следующий CSS:

.child {
  position:absolute;
  right: 0px;
  top: -201px;
}

Родитель должен иметь position: relative для этого.

Вот вилка вашей скрипки: https://jsfiddle.net/3uqdnabh/

Я также добавил margin-top: 250px к родительскому, так как иначе изображение не будет видно.