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

我正在制作一个响应性很强的网页，上面有人的面部照片，这些照片是浮动的IMG，旁边是关于每个人的一些描述性文字

这在较小的页面宽度下非常有效，但当页面变宽时，与下一个人相关的文本将从上一个人的图像旁边开始

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

我已经建立了一个JSFIDLE

img{
浮动：左；
明确：两者皆有；
利润率：0 20px 20px 0；
}

第一人称
几段文字

第二个人的名字
文本的一些段落。

您可以使用以下方法清除

p

元素后的

浮动

：

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

第一人称

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是法雷特拉·康格修女。这是一种病态，是一种疾病。这是一个很好的例子。整型调味品梅特斯利奥，一种中间的猫科动物。
但前庭无径无舌苔。有效的purus和elementum auctor。Praesent调味品id sapien vitae Temporal。ultrices accumsan lectus，ullamcorper velit拍卖行。比本杜姆悬吊术，奥迪奥孕妇
比勒陀利亚河、马萨门的精英、智者之箭。这是一个很好的例子。酒后驾车。

第二个人的名字

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是法雷特拉·康格修女。这是一种病态，是一种疾病。这是一个很好的例子。整型调味品梅特斯利奥，一种中间的猫科动物。
但前庭无径无舌苔。有效的purus和elementum auctor。Praesent调味品id sapien vitae Temporal。ultrices accumsan lectus，ullamcorper velit拍卖行。比本杜姆悬吊术，奥迪奥孕妇
比勒陀利亚河、马萨门的精英、智者之箭。这是一个很好的例子。酒后驾车。

尝试使用引导列结构

#集装箱img{
边缘底部：20px；
}

第一人称
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是法雷特拉·康格修女。这是一种病态，是一种疾病。这是一个很好的例子。整型调味品梅特斯利奥，一种中间的猫科动物。但前庭无径无舌苔。有效的purus和elementum auctor。Praesent调味品id sapien vitae Temporal。ultrices accumsan lectus，ullamcorper velit拍卖行。本杜姆悬液，妊娠前罗纳卡悬液，马萨门精华液，无尾人马矢状液。这是一个很好的例子。酒后驾车。

第二个人的名字
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是法雷特拉·康格修女。这是一种病态，是一种疾病。这是一个很好的例子。整型调味品梅特斯利奥，一种中间的猫科动物。但前庭无径无舌苔。有效的purus和elementum auctor。Praesent调味品id sapien vitae Temporal。ultrices accumsan lectus，ullamcorper velit拍卖行。本杜姆悬液，妊娠前罗纳卡悬液，马萨门精华液，无尾人马矢状液。这是一个很好的例子。酒后驾车。

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

---

谢谢你！理想情况下，我希望在不使用额外HTML的情况下解决这个问题，即仅在与img、h1和p标记相关的CSS中。这样，非技术人员可以添加内容。查看我编辑的问题。@clayRay查看编辑后的答案，该答案不会改变完成该任务的markuphanks@kukkuz！谢谢我可能需要采用这种方法，但理想情况下，内容应该是IMG、P和标题标签，以便非技术人员可以输入。我希望有一个CSS唯一的解决方案。请看我编辑的答案。谢谢！我可能需要采取这种方法，但理想情况下，内容应该是IMG、P和标题标签，以便非技术人员可以输入。我希望有一个CSS唯一的解决方案。请参阅我编辑的答案。

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