3

<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ましたが、テキストが画像の上にぶら下がっている問題は修正されましたが、テキストのパディングが台無しになりました。タイトルを画像の右下に「正しい」方法で配置するために、どうすればよいか知っている人はいますか?

問題のjsfiddleは次のとおりです。

http://jsfiddle.net/BUpmr/3

4

4 に答える 4

1

画像はデフォルトでインラインです。つまり、文字ディセンダー用のスペースが許可されます。

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

img {display: block}
于 2013-03-27T20:00:49.530 に答える
0

下から上に移動するピクセル数がわかっている場合は、次のように実行できます。

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

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

于 2013-03-27T19:52:50.300 に答える
0

position: absolute を使用しており、ドキュメント フローから要素を取り出します。この場合、画像とテキスト要素の両方がスペースを占めるようにする必要があるため、position: relative代わりに を使用します。

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

  1. position: absolute;CSS の本文から を削除します
  2. #titleposition: absoluteを に変更position: relative;
  3. 要素に追加width:600pxします (画像の幅が 600px であるため) (または幅を#title小さくして (たとえば 550px)、テキストを少し左に寄せます)。
  4. に追加text-align: rightし#titleて、テキストを右隅に配置します
  5. .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;}
于 2013-03-27T20:16:44.880 に答える
0

下部のスペースの原因は行の高さではなく、ブラウザーが画像の下部をテキストのベースラインに揃えようとしているからです。

それを修正するにvertical-align: topは、画像に設定します: http://jsfiddle.net/VRyCF/2

于 2013-03-27T19:56:20.850 に答える