- ベストアンサー
「divが空です」のエラーを出したくない
下記、枠の中にフロートした写真を置きましたが、Firefoxでは写真が枠を飛びでてしまいます。 mawarikomiが終わったあとに、clear:leftの空divを置けば解決しますが、バリデートで「divが空です」とエラーがでるのはどうも気分が悪く・・・。 下記URL http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html# ではベストな方法みたいなことが載っているのですが、よくわかりませんでした。 みなさん、どうしていらっしゃるのでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>つきぬける</title> <style type="text/css"> <!-- .kakomi { padding: 3px; width: 500px; border: 1px solid #77AAEC; } #mawarikomi { margin: 0px; padding: 0px; width: 490px; height: auto; } #mawarikomi img { float: left; margin-right: 10px; } --></style> </head> <body> <div class="kakomi"> <div id="mawarikomi"><img src="***.jpg" width="100" height="100"> <p>説明・説明・説明・説明・説明・説明・</p> </div> </div> </body> </html>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- 1412lovers
- ベストアンサー率40% (58/144)
画像と枠のサイズを固定してみました。これで、いかがでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>つきぬける</title> <style type="text/css"> <!-- .kakomi { padding: 3px; width: 500px; border: 1px solid #77AAEC; height: 100px; } #mawarikomi { margin: 0px; padding: 0px; width: 490px; height: 100px; } #mawarikomi img { float: left; margin-right: 10px; } --></style> </head> <body> <div class="kakomi"> <div id="mawarikomi"><img src="img/photo_04.jpg" width="100" height="100"> <p>説明・説明・説明・説明・説明・説明・</p> </div> </div> </body> </html>
補足
ご回答、ありがとうございます。 Firefoxで文字サイズを標準より拡大して見たり、他のページで使う場合に、他箇所で使用して文字数が多くなったりした場合を考えると、高さを固定したくないのですが・・・。
お礼
ご回答ありがとうございました。 contentプロパティも調べてみて知りました。 解決できて助かりました。 ありがとうございました！！