将相关文本保留在浮动图像旁边
Keep related text next to floated image
我正在开发一个响应式网页，该网页将人脸照片作为浮动 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 用于确保第二张图片不会浮动到第一张图片的右侧。
编辑：理想情况下，我会在不使用任何特殊标记的情况下执行此操作，例如 DIV 和内联样式。原因是非技术人员正在使用 TinyMCE 编辑器将此内容输入到我们的 CMS 中。理想情况下，这些人不需要知道任何 HTML。所以我真的更喜欢 CSS-only 解决方案。
您可以清除 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>
尝试使用 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>
尝试使用 divs 并在 前后清除 elements 伪选择器
Demo link
.top-content:after, .top-content:before {
display: block;
content: "";
clear: both;
margin-bottom: 30px;
}
我正在开发一个响应式网页，该网页将人脸照片作为浮动 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 用于确保第二张图片不会浮动到第一张图片的右侧。
编辑：理想情况下，我会在不使用任何特殊标记的情况下执行此操作，例如 DIV 和内联样式。原因是非技术人员正在使用 TinyMCE 编辑器将此内容输入到我们的 CMS 中。理想情况下，这些人不需要知道任何 HTML。所以我真的更喜欢 CSS-only 解决方案。
您可以清除 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>
尝试使用 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>
尝试使用 divs 并在 前后清除 elements 伪选择器 Demo link
.top-content:after, .top-content:before {
display: block;
content: "";
clear: both;
margin-bottom: 30px;
}