初めて質問します。
2つの横にならんだセルをDIVによって表示しようと思い

<DIV style="width:112px;height:20px;background-color:red;
position:relative;left:0px;top:0px;">テスト1</DIV>
<DIV style="width:112px;height:20px;background-color:yellow;
position:relative;left:112px;top:-20px;">テスト2</DIV>

というスタイルシートを作成しようとしたのですが、実際にはテスト10まであり、一行がいかんせん長いので次のようにしてみました。
<DIV style="width:112px;height:20px;">
<DIV style="background-color:red;
position:relative;left:0px;top:0px;">テスト1</DIV>
<DIV style="background-color:yellow;
position:relative;left:112px;top:-20px;">テスト2</DIV>

同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、
<DIV style="width:112px;height:20px;position:relative;">
<DIV style="background-color:red;left:0px;top:0px;">テスト1</DIV>
<DIV style="background-color:yellow;left:112px;top:-20px;">テスト2</DIV>

この記述だと、セルが下にくっついてしまい、うまく表示できません。
positionは必ず記述しないといけないのでしょうか。できたらもっと1行を短くしたいのですが…
解決方法がわかる方いらっしゃいましたら、宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

> positionは必ず記述しないといけないのでしょうか


ちょっと違うわ。
まとめることはできないのよ。
2つ目のがまとめているように見えるのは
外側の<DIV>タグのスタイルによって
その内側の領域のサイズがwidth:112px;になっているだけよ。
内側の<DIV>のスタイルにwidth:112px;height:20pxが
継承されているわけじゃないわ。

<DIV>にclass属性をつけて
共通部分
width:112px;height:20px;position:relative;
をそのクラスに適用、
共通じゃない部分を
<DIV>にstyle属性で書けばいいわ。
    • good
    • 0
この回答へのお礼

回答有難うございます。
ためしに記述を変更してみたところ、無事出来ました!
外側のみに適用されていた状態だったのですね。
これで望み通りのHPが作れそうです。
有難うございました。

お礼日時:2009/05/22 17:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング