将相关文本放在浮动图像旁边

Question

我正在开发一个响应式网页，其中有人们的面部照片作为浮动的IMG并排显示在每个人的一些描述性文本旁边。

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

我需要一种方法，可以强制文本出现在特定图像的顶部或以下位置。

我已经设置了一个JSFiddle 这里。

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 是为了确保第二张图片不会浮动到第一张图片的右侧。

编辑：理想情况下，我希望不使用任何特殊标记，比如DIV和内联样式来完成这个任务。原因是这些内容将由非技术人员使用TinyMCE编辑器输入到我们的CMS中。理想情况下，这些人不需要知道任何HTML。因此，我更喜欢仅使用CSS解决方案。

- clayRay

Answer 1

您可以使用以下代码清除 p 元素后的 float ：clear。

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

如果标记不能更改，你可以使用伪元素pseudo来处理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>

- kukkuz

---

谢谢！理想情况下，我希望能够在不使用额外HTML的情况下解决这个问题，即只需使用与img、h1和p标签相关的CSS。这样非技术人员就可以添加内容了。请参见我的编辑后的问题。 - clayRay

@clayRay请查看已编辑的答案，不要更改标记。 - kukkuz

谢谢@kukkuz，它完成了任务！ - clayRay

Answer 2

尝试使用 Bootstrap 的列结构。

#container img {
 margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="container">
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
    <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>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
      <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>
</div>

- Minal Chauhan

---

谢谢！我可能需要采取这种方法，但理想情况下，内容只应包含IMG、P和标题标签，以便非技术人员可以输入。我希望有一个仅基于CSS的解决方案。请查看我的编辑答案。 - clayRay

Answer 3

尝试使用 div 和清除 元素伪选择器 before 和 after 演示链接

.top-content:after, .top-content:before {
   display: block;
   content: "";
   clear: both;
   margin-bottom: 30px;
}

- Nazar Becks

---

谢谢！我可能需要采取这种方法，但理想情况下，内容只应该是IMG、P和标题标签，以便非技术人员可以输入。我希望有一个仅基于CSS的解决方案。请查看我的编辑答案。 - clayRay