Html 包装文本应与上面的图像重叠

我目前正在用大量继承的遗留代码改进一个网页。出现的问题之一是在固定高度和宽度的容器中包装文本行，下面的图片可以更好地解释：

第一个图像是正常行为，如果文本足够短，可以放在一行中，则显示第一个图像

第二个图像显示所需的行为：如果文本必须换行，则容器的大小应扩大，并适当覆盖图像的下部。但是，它不重叠，因此第三个图像是结果行为

删除“固定宽度”或“固定高度”约束是不可行的，它会创建令人不快的不规则。一开始就是这样，所以我正在努力解决这个问题

我试着用

z-index

和

position

ing来解决这个问题，但哪怕是一点点都无法让它工作

---

因长度而换行的线条示例

.element{
利润率：15px 7px；
显示：内联块；
溢出：隐藏；
位置：相对位置；
颜色：#222；
最大高度：523px；
最大宽度：300px；
}
.元素img{
垂直对齐：顶部；
}
.元素h2{
文本对齐：居中；
背景:#333333；
填充：12px0；
字体：400 16px/22px“Roboto Slab”，衬线；
保证金：0；
颜色：#fff；
边框顶部：1px实心#333333；
文本转换：大写；
}
.元素h2 a{
颜色：#fff；
文字装饰：无；
字体：400 16px/22px“Roboto Slab”，衬线；
}
.元素span.view{
显示：块；
文本对齐：居中；
背景：#fff；
填充：12px0；
字体：400 16px/22px“Roboto Slab”，衬线；
保证金：0；
}
.元素span.视图a{
文字装饰：无；
颜色：#333333；
}
身体{
背景：#111；
}

---

这就是你要找的吗

.lower-part-of-element {
    position: absolute;
    bottom: 0;
}

---

还请注意，您应该将

span

更改为

div

如果要解决此问题，请保持原有HTML的完整性，那么最好的办法是绝对定位

.element

容器底部的

.element

下部。在后一个底部添加足够的填充物，以“腾出空间”容纳图像下的默认文本量

.element{
位置：相对位置；
利润率：15px 7px；
垫底：5.75em；
显示：内联块；
溢出：隐藏；
位置：相对位置；
颜色：#222；
最大高度：523px；
最大宽度：300px；
}
.元件.元件的下部{
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.元素img{
垂直对齐：顶部；
}
.元素h2{
文本对齐：居中；
背景:#333333；
填充：12px0；
字体：400 16px/22px“Roboto Slab”，衬线；
保证金：0；
颜色：#fff；
边框顶部：1px实心#333333；
文本转换：大写；
}
.元素h2 a{
颜色：#fff；
文字装饰：无；
字体：400 16px/22px“Roboto Slab”，衬线；
}
.元素span.view{
显示：块；
文本对齐：居中；
背景：#fff；
填充：12px0；
字体：400 16px/22px“Roboto Slab”，衬线；
保证金：0；
}
.元素span.视图a{
文字装饰：无；
颜色：#333333；
}
身体{
背景：#111；
}

你有例子吗？我会选择文本div和oveflow隐藏的固定高度。@MikeX在Codepen.io上有一个内联代码段和一个示例。“溢出隐藏”不是一个选项，我们希望显示参与该事件的人的全部文本。如果要解决此问题，请保持原有HTML的完整性，最好将

。元素的下半部分从
。元素
容器的底部绝对定位。在后一个底部添加足够的填充物，以“腾出空间”容纳图像下的默认文本量。谢谢，这正是我所需要的！不完全如此，CBroe的回答更准确。为什么建议更改为div？因为作为span的内联元素不应该包含块元素-更多信息请参见此处。不管怎样，很高兴你解决了！啊，是的。不知怎么的，我总是忘记这一点，因为它并没有让我头痛（现在）。谢谢：D