将相关文字保留在浮动图片旁边 [英] Keep related text next to floated image

问题描述

我正在一个响应式网页上，该网页的人脸照片是漂浮的IMG，旁边是每个人的一些描述性文字。

这在较小的页面宽度上效果很好，但是当页面变宽时，与下一个人相关联的文本开始于

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

我已经建立了JSFiddle 此处。

  img {float：left;清楚的margin：0 20px 20px 0;}  

 < img src = https://placehold.it/300x300>< h1>第一人称< / h1>< p>文本的一些段落。< / p>< img src = https：// placehold.it/300x300\"><h1>第二个人的名字< / h1>< p>几段文字。< / p>  

注意：清除：两者都在其中，以确保第二个图像不存在。 t浮动到第一张图片的右侧。

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

解决方案

您可以清除 float 在 p 元素之后，使用：

 < div style = clear：both>< / div> 
  

请参见下面的演示：

<前置类= snippet-code-css lang-css prettyprint-override> #container img {float：left; margin：0 20px 20px 0;}

 < div id =容器> < img src = https://placehold.it/360x360> < h1>第一人称名字< / h1> < p> Lorem ipsum dolor坐下，一直保持着安静的状态。 Quisque id ex ut nunc pharetra congue。 Morbi ut lectus vulputate nunc congue convallis。 Nunc ulquatics qua ac dolor tincidunt feugiat。 Integer condimentum metus leo（整形调味品），在di中散发性臭味。Utnon diam non ligula aliquam iaculisvestibulum quis urna。 Maecenas efficitur purus et elementum auctor。 Praesent调味品ID tempor tempor。乌拉尔·乌尔姆卡勒斯·乌克图斯（quis ullamcorper velit auctor）。 Suspendisse bibendum，diodio gravida rhoncus pretium，enim elit porta massa，quis sagittis dolor sapien vel nulla。 Nullam et enim actellus aliquam pulvinar。 Proin et bibendum dui。 < / p> < div style = clear：both>< / div> < img src = https://placehold.it/360x360> < h1>第二人称< / h1> < p> Lorem ipsum dolor坐下，一直保持着安静的状态。 Quisque id ex ut nunc pharetra congue。 Morbi ut lectus vulputate nunc congue convallis。 Nunc ulquatics qua ac dolor tincidunt feugiat。 Integer condimentum metus leo（整形调味品），在di中散发性臭味。Utnon diam non ligula aliquam iaculisvestibulum quis urna。 Maecenas efficitur purus et elementum auctor。 Praesent调味品ID tempor tempor。乌拉尔·乌尔姆卡勒斯·乌克图斯（quis ullamcorper velit auctor）。 Suspendisse bibendum，diodio gravida rhoncus pretium，enim elit porta massa，quis sagittis dolor sapien vel nulla。 Nullam et enim actellus aliquam pulvinar。 Proin et bibendum dui。 < / p>< / div>  

如果标记可以不能更改，可以使用 pseudo 元素来 p ：

  p：在{
 display：block;之后
内容：’； 
 clear：两者； 
} 
  

请参见下面的演示：

<前置类= snippet-code-css lang-css prettyprint-override> #container img {float：left; margin：0 20px 20px 0;} p：{{display：block;内容：’’; clear：both;}

 < div id = container > < img src = https://placehold.it/360x360> < h1>第一人称名字< / h1> < p> Lorem ipsum dolor坐下，一直保持着安静的状态。 Quisque id ex ut nunc pharetra congue。 Morbi ut lectus vulputate nunc congue convallis。 Nunc ulquatics qua ac dolor tincidunt feugiat。 Integer condimentum metus leo（整形调味品），在di中散发性臭味。Utnon diam non ligula aliquam iaculisvestibulum quis urna。 Maecenas efficitur purus et elementum auctor。 Praesent调味品ID tempor tempor。乌拉尔·乌尔姆卡勒斯·伊克图斯（quis ullamcorper velit auctor）。 Suspendisse bibendum，diodio gravida rhoncus pretium，enim elit porta massa，quis sagittis dolor sapien vel nulla。 Nullam et enim actellus aliquam pulvinar。 Proin et bibendum dui。 < / p> < img src = https://placehold.it/360x360> < h1>第二人称< / h1> < p> Lorem ipsum dolor坐下，一直保持着安静的状态。 Quisque id ex ut nunc pharetra congue。 Morbi ut lectus vulputate nunc congue convallis。 Nunc ulquatics qua ac dolor tincidunt feugiat。 Integer condimentum metus leo（整形调味品），在di中散发性臭味。Utnon diam non ligula aliquam iaculisvestibulum quis urna。 Maecenas efficitur purus et elementum auctor。 Praesent调味品ID tempor tempor。乌拉尔·乌尔姆卡勒斯·乌克图斯（quis ullamcorper velit auctor）。 Suspendisse bibendum，diodio gravida rhoncus pretium，enim elit porta massa，quis sagittis dolor sapien vel nulla。 Nullam et enim actellus aliquam pulvinar。 Proin et bibendum dui。 < / p>< / div>  

I'm working on a responsive webpage that has photos of people's faces as floated IMGs next to some descriptive text about each person.

This works very well at smaller page widths, but when the page gets wide, the text associated with the next person starts next to the previous person's image.

I need a way to force text appear no higher than the top of the particular image.

I've set up a 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>

Note: the clear: both is there to make sure the second image doesn't float to the right of the first image.

EDIT: Ideally I would do this without using any special markup, such as DIVs and inline style. The reason for this is that this content is being entered into our CMS by non-technical staff using the TinyMCE editor. Ideally these people wouldn't need to know any HTML. So I would really prefer a CSS-only solution.

解决方案

You can clear the float after the p element using:

<div style="clear:both"></div>

See demo below:

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

If markup can't be changed, you can use a pseudo element to p:

p:after {
    display: block;
    content: '';
    clear: both;
}

See demo below:

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

这篇关于将相关文字保留在浮动图片旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！