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

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 {&nbsp; padding-left: 20%;&nbsp; padding-right: 20%;&nbsp; font-size: 20px;&nbsp; list-style-type: none;&nbsp; color: #231427;}#MainDiv {&nbsp; display: flex;&nbsp; flex-direction: column;}.row {&nbsp; display: flex;&nbsp; flex-direction: row;}.images {&nbsp; margin: 10px;&nbsp; font-size: 20px;&nbsp; list-style-type: none;&nbsp; color: #231427;}<div id="MainDiv">&nbsp; <div class="row">&nbsp; &nbsp; <div class="images">&nbsp; &nbsp; &nbsp; <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">&nbsp; &nbsp; </div>&nbsp; &nbsp; <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>&nbsp; &nbsp; <br>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="images">&nbsp; &nbsp; &nbsp; <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">&nbsp; &nbsp; </div>&nbsp; &nbsp; <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>&nbsp; &nbsp; <br>&nbsp; </div></div>