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

ここに解決策があります（あなたの問題を正確に理解しているかどうかはわかりません）：
http://jsfiddle.net/Hz4JF/11/

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

これはマージンの崩壊によるものです。追加するだけoverflow: auto;

デモhttp://jsfiddle.net/Hz4JF/6/

于 2013-10-28T21:55:15.710 に答える