Question

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

我想要的是什么：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

除非我遗漏了什么，否则你能不能添加清楚的内容吗？

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

Answer 2

您需要的是＆＃34; clearfix＆＃34;。将其添加到.img css：clear:both;

将图像和段落成对排列成两列而不重叠图像（wordpress）

2 个答案: