Поместите изображения в промежуток, где текст дополнен

Question

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

В настоящее время изображение является частью текста или даже выталкивает текст далее в неправильном направлении.

.body{
  padding-left: 20%;
  padding-right: 20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}
.body > .images{
  padding-left: -20%;
  padding-right: -20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
<br>
<div class="images">
  <img src="img/IMG_3502.JPG" alt="W. Jons Property" width="170px">
</div>

Answer 1

Вы можете использовать flex для вашего требования.

.body {
  padding-left: 20%;
  padding-right: 20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}

#MainDiv {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.images {
  margin: 10px;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}

<div id="MainDiv">
  <div class="row">
    <div class="images">
      <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
    <br>
  </div>

  <div class="row">
    <div class="images">
      <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
    <br>
  </div>



</div>