html - 将相关文本保留在 float 图像旁边

Question

我正在开发一个响应式网页，该网页将人脸照片作为 float IMG，旁边是关于每个人的一些描述性文本。

这在较小的页面宽度下效果很好，但当页面变宽时，与下一个人相关的文本会从上一个人的图像旁边开始。

我需要一种方法来强制文本显示不高于特定图像的顶部。

我已经设置了一个 JSFiddle here .

img {
  float: left;
  clear: both;
  margin: 0 20px 20px 0;
}

<img src="https://placehold.it/300x300">
<h1>First person's name</h1>
<p>A few paras of text.</p>
<img src="https://placehold.it/300x300">
<h1>Second person's name</h1>
<p>A few paras of text.</p>

注意:clear: both 是为了确保第二张图片不会 float 到第一张图片的右侧。

编辑:理想情况下，我会在不使用任何特殊标记的情况下执行此操作，例如 DIV 和内联样式。原因是非技术人员正在使用 TinyMCE 编辑器将此内容输入到我们的 CMS 中。理想情况下，这些人不需要了解任何 HTML。所以我真的更喜欢纯 CSS 解决方案。

Answer 1

您可以使用以下方法清除 p 元素后的float:

<div style="clear:both"></div>

请看下面的演示:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}

<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <div style="clear:both"></div>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>

如果无法更改标记，您可以使用伪元素来p:

p:after {
    display: block;
    content: '';
    clear: both;
}

请看下面的演示:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}
p:after {
    display: block;
    content: '';
    clear: both;
}

<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>