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

概述我正在开发一个响应式网页,其中有人脸的照片作为浮动的IMG,旁边是关于每个人的一些描述性文字. 这在较小的页面宽度下非常有效,但是当页面变宽时,与下一个人相关联的文本将在上一个人的图像旁边开始. 我需要一种方法来强制文本显示不高于特定图像的顶部. 我已经建立了一个JSFiddle here. img { float: left; clear: both; margin: 0 20px 我正在开发一个响应式网页,其中有人脸的照片作为浮动的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>

注意：清除：两者都是为了确保第二个图像不浮动到第一个图像的右侧.

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

解决方法 你可以使用以下方法清除p元素之后的float：

<div ></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 ></div>  <img src="https://placehold.it/360x360">  <h1>    Second person's name  </h1>  <p>    Lorem ipsum dolor sit amet,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,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,quis sagittis dolor sAPIen vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.  </p></div>

总结

以上是内存溢出为你收集整理的html – 将相关文本保留在浮动图像旁边全部内容，希望文章能够帮你解决html – 将相关文本保留在浮动图像旁边所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。