2012-05-11 24 views
2

CSSを使用して特定のレイアウトを取得したいと考えていますが、可能かどうかはわかりません。 div内にテキストがあり、中央に配置されています。下には、テキストが入った別のdivがあります。私がしたいのは、右端がその上にあるテキストの右端と一致するように、このテキストを右揃えにすることです。HTML要素が兄弟中心の要素の端に右揃え

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

< DIVスタイル= 'テキスト整列:センター;'>これは、いくつかの見出しテキスト</div>

< DIVスタイル= 'でテキスト整列:右;'>サブヘッダテキスト</DIV>

注:強い好みはストレートCSS(ノーJavascriptを可能な場合)のためです。

注2:私は上記のHTMLに悩まされていません。私は記述されたアライメントを達成するマークアップを使用することができます。

+0

あなたはそのHTMLに悩まされていますか? – thirtydot

+0

あなたが持っているHTMLマークアップでは不可能 –

+0

@thirtydotいいえ、私は整列を達成するHTMLに満足しています。 – McGarnagle

答えて

4

@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> 

をあなたはおそらく、絶対位置決めされるサブヘッダによって失われた高さを補うために、divにいくつかのpadding-bottomを追加したいです。

+0

素晴らしいです、ありがとうございます! – McGarnagle

+2

これは...本当に印象的です – Jason

関連する問題