てんぽ: ブロックボックスの右寄せの解答

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

ブロックボックスの右寄せの解答

2006年11月11日(土)

ブロックボックスの右寄せの解答です。 この問題の意図は、ボックスとその包含ブロックの関係を意識させることでした。 スタンダードな解答として想定していたのは以下の3つ。

  • pにmargin-left:auto(ボックスと包含ブロックに関する等式からautoの値が求まる。)
  • pにfloat:right(右フロートは包含ブロック内で右に寄せられる。)
  • divにposition:relative, pにposition:absoluteとright:0;(絶対配置ボックスの包含ブロックは、間近のpositionの値がstaticでない親要素が形成する。)

また、この問題のポイントはdivの幅が80%で可変であるのに対し、pは200pxと固定されていることです。 CSS2.1では値に計算式('100%-200px'など)を使えないので、異なる単位(今回は%とpx)を組み合わせた位置指定が困難です。 これをどう実現するか。

解答例ではmarginとpositionを併用することで実現しています。

トラックバックで寄せられた回答の中ではdirectionを使うというのが想定外で面白かった。

#116
カテゴリ:HTML・CSS
タグ[ CSS ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/116-36e9d276

<<コンテナブロック(包含ブロック)とは | KanonのDVDはそこそこ安い>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。