Question

我有一个网站，其中<div>扩展为包含图片和标题。到目前为止我所做的是创建一个这样的层次结构：

<div class="thumb">
    <img src="image_url"/>
    <div id="title">title</div>
</div>

然后将标题定位如下：

#title{
    position: absolute;
    bottom: 0;
    left: 0;
}

但标题<div>位于图片底线的下方。我试图减少div中的line-height，这解决了文本悬挂在图像上的问题，但搞砸了文本填充。有没有人知道我应该采取哪些不同的方式，以“正确”的方式将标题置于图像的右下角？

这是问题的一个方面：

http://jsfiddle.net/BUpmr/3

Answer 1

如果您想知道要从底部向上移动多少像素，您可以这样做：

#title
{
    position: absolute;
    right: 0px;
    bottom: 5px;
    background-color: #0f0;
    padding: 0px 4px 0px 4px;
}

http://jsfiddle.net/BUpmr/12/

Answer 2

底部空间的原因不是行高，而是浏览器尝试将图像底部与文本基线对齐。

要解决此问题，请在图片上设置vertical-align: top：http://jsfiddle.net/VRyCF/2

Answer 3

默认情况下，图像是内联的，这意味着它们允许字符下伸空间。

http://jsfiddle.net/BUpmr/10/

img {display: block}

Answer 4

您使用的是position：absolute，它会从文档流中获取元素。在这种情况下，您希望图像和文本元素都占用空间，因此请改用position: relative。

http://jsfiddle.net/BUpmr/13/

从css

position: absolute;

在#title将position: absolute更改为position: relative;
将width:600px添加到元素中（因为图片宽度为600px）（或者使#title上的宽度变小（例如550px），以便将文字稍微放在左侧。
将text-align: right添加到#title以获取右上角的文字
添加.thumb img {display：block;}

CSS：

    body {
        background-color: #eef;
        padding: 0px;
        margin: 0px;
    }

    #title{
        position: relative;
        text-align:right;
        width:550px;
        bottom: 0;
        right: 0;
        background-color: #0f0;
        padding: 0px 4px 0px 4px;
    }

    .thumb{
        background-color: #f00;
            width:600px;
    }

   .thumb img {display:block;}

如何处理div底部的行高添加填充

4 个答案: