1

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;
}

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

4

3 回答 3

4

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

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

这就是你所寻求的吗？

于 2013-10-28T21:55:15.433 回答
0

这是由于利润率崩盘。只需添加overflow: auto;

演示http://jsfiddle.net/Hz4JF/6/

于 2013-10-28T21:55:15.710 回答
0

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

#text{
    position:relative;
    bottom:100px;
    text-align: center;
}
于 2013-10-28T21:56:25.030 回答