将图像放置在文本填充的间隙中

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>