2009年6月28日日曜日

HTML+CSS エラーメモ

※追記:書いてから見てみると出来てますね。
    え、なんで?
※さらに追記:原因(?)がわかりました。
       別のCSSファイルに書いたCSSをclass名で当てていたものが、
       うまく反映されていないようです。
       理由が分からないから余計に混乱します・・・。
作ってるうちにムカついてきたので、頭を冷やすついでにメモ。

HTMLとCSSを組み合わせてとあるページサンプルを作っている途中なのですが、テーブルのセル内でのレイアウトについて困っています。
それは、1行内に左右両端にそれぞれオブジェクトを配置して表示するということ。
物体1
物体2
とすると、ご覧の通り物体2が1行下に表示されます。
<div>
 <div style="float:left;">物体1</div>
 <div style="text-align:right;">物体2</div>
</div>
原因は、<div>を使用しているせいです。 <DIV>-HTMLタグリファレンス <div>は、自動的にその前後で改行を行う「ブロック要素」なのです。 それでは困ってしまうので、改行されない<span>を使います。
物体1物体2
すると今度は、物体2が左に並べられてしまいます。
<div>
 <span style="float:left;">物体1</span>
 <span style="text-align:right;">物体2</span>
</div>
これも原因は<span>を使用しているせいで、「text-align」が適用されないのです。 text-align - CSS Dencitie こちらにある通り、「text-align」は「ブロック要素」に適用されるものであり、<span>のような「インライン要素」には適用されないのです。 んー、これはどうしたものか・・・。 1行に左右両端とも表示出来るような違うやり方があるのか、はたまたこれに似た方法があるのかわからないです。 もう少し考えてみることにします。

0 件のコメント:

コメントを投稿