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

Posted 2023-03-06

【中文标题】在浮动图像旁边保留相关文本

【英文标题】：Keep related text next to floated image

【发布时间】：2018-01-25 11:16:18

【问题描述】：

我正在开发一个响应式网页，其中包含人脸照片作为浮动 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 的解决方案。

【参考方案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>

【讨论】：

谢谢！理想情况下，我想在不使用额外 HTML 的情况下解决这个问题，即只在与 img、h1 和 p 标签相关的 CSS 中。这样非技术人员也可以添加内容。请参阅我编辑的问题。

@clayRay 查看不更改标记的已编辑答案

感谢@kukkuz 完成了这项工作！

【参考方案2】：

尝试使用 divs 并清除 elements 之前和之后的伪选择器 Demo link

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

【讨论】：

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

【参考方案3】：

尝试使用 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>

【讨论】：

谢谢！我可能需要采用这种方法，但理想情况下，内容只是 IMG、P 和标题标签，以便非技术人员可以输入。我希望有一个纯 CSS 的解决方案。请参阅我编辑的答案。