2

次のように CSS を使用して特定のレイアウトを取得したいのですが、それが可能かどうかはわかりません。中央に配置された div 内にいくつかのテキストがあります。その下に、テキストを含む別の div があります。私がやりたいのは、このテキストを右揃えにして、その右端がその上のテキストの右端と同じ高さになるようにすることです。

CSSを使用して、これを行う方法がわかりません。サブヘッダーがコンテナに右揃えされるため、明らかに次のアプローチは機能しません。しかし、私が望むアライメントを達成するためのトリックはありますか?

<div style='text-align: center;'>これは見出しテキストです</div>

<div style='text-align: right;'>サブヘッダー テキスト</div>

注:ストレート CSS (可能であれば Javascript なし) が強く推奨されます。

注 #2:上記の HTML にこだわっていません。説明した配置を実現する任意のマークアップを使用できます。

4

1 に答える 1

6

@thirtydotいいえ、配置を達成するHTMLに満足しています。

これを試してください：http://jsfiddle.net/thirtydot/nU9Cj/

<div style='text-align: center'>
    <span style="position: relative">This is some headline text
        <span style='position: absolute; top: 100%; right: 0; font-weight: bold'>Sub-header text</span>    
    </span>
</div>

サブヘッダーが絶対位置にあることによって失われた高さを補うために、おそらくいくつかpadding-bottomをに追加したいと思うでしょう。div

于 2012-05-11T23:40:19.600 に答える