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

Question

我正在制作一个自适应网页，其中包含人脸的照片，这些照片是关于每个人的一些描述性文字旁边的浮动IMG。

这适用于较小的页面宽度，但当页面变宽时，与下一个人相关联的文本将在上一个人的图像旁边开始。

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

我已经设置了一个JSFiddle here。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：clear: both用于确保第二张图片不会浮动到第一张图片的右侧。

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

Answer 1

您可以<{1}}元素之后清除 float使用：

p

见下面的演示：

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

Answer 2

尝试使用Bootstrap列结构

tmpfs

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

Answer 3

尝试使用 divs 并在之前和之后清除元素伪选择器 Demo link

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