0

ラップされた非ブロック レベル要素間の行の高さを制御する必要があるレイアウトがあります。

<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>

私が達成したいのは次のようなものです:

例

これをクリアする必要がある要素が下にあるため、絶対配置に依存したくありません。段落に低い行の高さを設定すると、オブジェクトがボックスから外れてしまいます。以下のフィドルを参照してください。

http://jsfiddle.net/mdHKy/2/

何か案は？

4

1 に答える 1

0

最初にpaを指定してから、その量の半分 (2 行) にheight設定できます。line-height

p.payments {
    line-height: 1em;
    height:2em;
}

次に、line-heightをに設定smallし、次の1emように指定しますvertical-align。

p.payments small {
    line-height:1em;
    vertical-align:top;
}

次に、あなたのvertical-alignを設定します.light：

p.payments small.light {
    vertical-align:baseline;
}

JSFiddle の例。

于 2013-03-28T12:53:08.640 に答える