Question

http://jsfiddle.net/Hz4JF/1/显示我的html + css。

我的目标是将图像放在容器的底部，文本的边距很小，不会导致图像被轻推。

现在是星期一，请原谅我，如果这是一个明智的选择。

HTML：

<div id="wrapper">
    <div id="superimpose">
        <img id="photo" src="http://i.istockimg.com/file_thumbview_approve/10391672/2/stock-photo-10391672-portrait-of-a-businessman-with-arms-crossed.jpg">
        <div id="text">
            <span id="name">Bob Smith</span>
            <span id="phone">123-456-7891</span>
        </div>
    </div>
</div>

CSS：

#superimpose{
    position:absolute;
    bottom:0;
    left:0;
}
#photo, #text{
    display: inline-block;
}
#text{
    margin-bottom:15px;
    text-align: center;
}
#text span{
    display: block;
}

P.S。 - 我在#text中使用跨度是有充分理由的。

Answer 1

将vertical-align: bottom;添加到#photo, #text会产生与您的描述类似的结果：

http://jsfiddle.net/zeTjn/3/

这是你寻求的吗？

Answer 2

这是由于margin collapse。只需添加overflow: auto;

即可

DEMO http://jsfiddle.net/Hz4JF/6/

Answer 3

这里的解决方案（我不确定我是否理解你的问题）：
http://jsfiddle.net/Hz4JF/11/

#text{
    position:relative;
    bottom:100px;
    text-align: center;
}

将图像保留在div的底部，但略高于文本

3 个答案: