- ベストアンサー
CSSのfloatについて質問があります
- CSSのfloatについて理解できないと悩んでいます。同じブロック要素でもtableやpタグは右に回りこみますが、divボックスはfloatを指定しないと下に入ってしまいます。
- 初歩的なことかもしれませんが、CSSのfloatに関してアドバイスをいただきたいです。
- コードの一部を示すと、div要素にはfloatが指定されておらず、table要素やp要素にはfloatが指定されています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
構造図などがないので何をどこに配置したいのかわかりませんが、 基本的に、floatの場合には全体の外枠幅とその中に割当てるwidth幅を考慮 それぞれもfloatさせたり、clear解除させたりしなければ不安定です。 今回は、全体幅が800px コンテントが300px 200px 100pxと計算があわないのと P をどこに配置したいのか・・・ class="right"にしているくらいだから、右に配置したいのだと思いますが 配置の設定がされていません・・・ これだと、右上なのか右下なのか余ったスペースなのか）全くわかりません。 -------------------------------------------------- <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { float: right; /* 追加部分 */ width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left">ああああああああ </div> <div style="float:left; width:290px; border:1px solid silver;"> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p> </div> <div class="right">いいいいいいい </div> <div style="clear: both; border:1px solid blue;">ううううう </div> <p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p><p>ppppp</p> </div> </body> </html>
お礼
ご回答ありがとうございます。参考にさせていただきます。
お礼
ご回答ありがとうございます。なんとなく分かってきました！ありがとうございます。