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

Question

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

我想要的：

.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;

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

aligning images and paragraphs in pairs in two colums without overlapping images (wordpress)

html

css

wordpress

css-float

margin