- 締切済み
回り込みfloatの間隔について質問です
ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。 左ボックスと右ボックスの間に1～2pxほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか？ お願いします。
- Musicful-hearts
- お礼率47% (220/463)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
=====以下は管理側に頼んで誤り訂正・及び補足をしてもらったものです========= 【誤】(float:left;を間違えて二度書いているので【下の方を】消す) #right{ /* 本件関係ないけど以下は入れないのね？ float:left; */ width: 200px; height: 100px; border:solid blue ; float:left; margin: 0; padding:0; } 【正】 #right{ /* 本件関係ないけど以下は入れないのね？ float:left; */ width: 200px; height: 100px; border:solid blue ; margin: 0; padding:0; } -----追加こめんと------- (#right{float:left;}がない場合、#leftは普段のz座標から少し浮いたような状態になっているので、 div#hogeの最初の行から内容が入る。 だから#hogeのheightには#leftの高さが計算されず #hoge{overflow:auto;}なしで #left{height:100px;} #right{height:10px;}とやると #hogeの高さは100pxでなく10pxに合わせられる。(borderに色をつけておくと非常にわかりやすい) #hoge{overflow:auto;}なしで #left{float:left;} #right{float:left;} だと#rightもz軸がずれるので #hogeの高さは0となる。 #hoge{overflow:auto;}を入れているのは、どこかで見たからといういい加減な理由。 #hogeの後続の要素をわざわざ作ってそれにclear:both;当てるよりエレガントだと思ったから。overflowの算出方法についてはW3Cの文書等や実装関係の文書で確認していないので省略(ここだけいい加減だが、面倒くさい)
- himajin100000
- ベストアンサー率54% (1660/3060)
手元にIE6がないんで後で確認するけど、IE 7,問題が再現せず。 (ソースが変わっているのは、 『おかしくなくても「自分が」全称セレクタに違和感を感じてしまうため、htmlやbodyに対する指定を増やした。』 『幅が増えてるかもしれないから厳密じゃないかもしれないけど 色のついた境界があるほうが見やすいから入れてる』 『なんとなくfloatするdiv要素はdivの中に入れないと落ち着かない』 という個人的な理由によるものですが、要領は変わらないと思うんで。 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>実験</title> <style type="text/css"> html{margin: 0; padding: 0;} body{margin: 0; padding: 0;} #hoge { margin: 0; padding: 0; border:solid red; /* 本件関係ないけど以下は入れないのね？ overflow:auto; */ } #left { width: 100px; height: 100px; float: left; border:solid green ; margin: 0; padding:0: } #right{ /* 本件関係ないけど以下は入れないのね？ float:left; */ width: 200px; height: 100px; float:left; border:solid blue ; margin: 0; padding:0; } </style> </head> <body> <div id="hoge"> <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> </div> </body> </html>
お礼
わかりやすくありがとうございました。 試してみますー