html - 图像和文本与文本在一行(但文本向上移动了一点)

Question

我必须实现下一件事。

图像和文本应固定在底部。它们也应该在一行上，但是文本应该相对于图像向上 10px。没问题(因为 img 标签有 display: inline 属性)，但我无法处理这些文本内容。

如果我将文本放在一个 div 中，position: absolute; bottom: 0，它会覆盖图像。如果我做到了 position: relative; float: left;，它不会被固定到 block 的底部。此外，我不能将 position: absolute 的 left 属性设置为图像的宽度，因为它可以变化。

我什至无法发出正确的搜索请求来找到我需要的东西。那里可以做什么？

Answer 1

有几种方法可以做到这一点。如果它真的是文本，请尝试应用 css:

.text{line-height:200px}
/*you can adjust the line-hight to best suit your needs (100px or whatever)*/

您还可以将 style="display:inline-block"应用于文本，这将允许您使用边距和填充(例如 margin-bottom:10px\padding-bottom:10px 等)请注意，对于跨浏览器(包括旧的 IE)display:inline-block 你应该写这样的东西:

.text{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding-bottom:10px;
}

*第一行是旧的mozilla，可以省略。zoom:1 和 *display:inline 适用于旧的 IE(如 7 或 8)...它不是很有效的标记，但工​​作完美，所以，不用担心