- ベストアンサー
CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ao_
- お礼率59% (112/189)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
「自信なし」です。 その前にちょっと気になった点。 XHTML 1.0 Transitionalなので 1.文字コードがUTF-8またはUTF-16でない時はXML宣言が必須です 2.meta要素の終了タグが無いため、整形式ではなくなってしまっています。 3.HTML 4.01と異なりstyle要素は#PCDATAなので<!-- ～ -->で対処すると内容が丸ごと無視されてしまいます。出来れば外部スタイルシートを用いるようにしてください その上で #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; float:left; } とやることで、3つを横並びにすることが出来ました... が何故かdivの背景色が反映されません Firefox(Build ID:2005062210)
その他の回答 (1)
- UKY
- ベストアンサー率50% (604/1207)
> 親要素の幅が許す限り、clearが入るまで続くと認識していましたがこれはひょっとしてインライン要素に限ったことですか？ それはもともとインライン要素だから float っぽく見えるだけで、実際に float しているわけではないと思う。 そもそも一箇所指定しただけで全部 float したらとんでもないことになると思うけど……。
お礼
ありがとうございます。 floatに関して根本的に間違った認識をしていました。 もっと勉強します。
補足
早々のご回答ありがとうございます。 CSSごとコピペして頂くためにあえてhtmlに埋め込みました。手元では外部読み込みにしています。 floatは3つのブロックに指定しないと効かないんでしょうか？ 親要素の幅が許す限り、clearが入るまで続くと認識していましたがこれはひょっとしてインライン要素に限ったことですか？