在两列中成对对齐图像和段落而不重叠图像（wordpress）

Question

我有来自 wordpress 的 WYSIWYG 编辑器，我在其中输入文本和图像。但是，我想将图像拉到文本的左侧（左侧边距为负），以便我有一个带有我的文本的列，并与左侧列上的一些图像对齐到某些段落的顶部。 我的问题是，当我有两个段落与两个图像对齐并且第一段的高度小于相应图像的高度时，第二个图像与第一个图像重叠，因为第二个段落的开头高于底部的第一张图片。在这种情况下，我想将第二张图像简单地向下推，因此它被放置在第一张图像的下方而没有任何重叠。

我想要什么：

.img {
  float: left;
  margin-left: -250px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-7 col-xs-offset-5">
      <p class="p1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  </p>
      <p class="img"><img src="https://placehold.it/240x200/333333"/>
      <p class="p2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <strong>!!! The darker image is overlapped by the grey one. Both have the same height.</strong> </p>
      <p class="img"><img src="https://placehold.it/240x200"/>
      <p class="p3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
   </div>
  </div>
</div>
  

感谢您的帮助！我很好奇你的解决方案是什么。

Answer 1

除非我遗漏了什么，否则你能不能只添加一个清除？

.img {
  float: left;
  margin-left: -250px;
  clear:left;
}

Answer 2

您需要的是“clearfix”。将此添加到 .img css：clear:both;