- ベストアンサー
floatによる複数段の段組でIE6で意図通り表示できない
過去の質問に似たような話題ありそうなんですが、 どれがこの事象なのか発見できませんでしたので、 申し訳ありませんが、新規質問させて頂きます。 HTMLとCSSで以下のように書いています。 （再現に必要な部分のみを取り出してあります） ---------------------------------------- <html> <head> <style> .div1 { width:100px; float:left; } .div2 { width:100px; clear:both; float:left; } </style> </head> <body> <div class="div2">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> <div class="div2">たちつてと</div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> </body> </html> ---------------------------------------- 意図は、以下のように、３列×２段の段組で表示することです。 あいうえお かきくけこ さしすせと たちつてと なにぬねの はひふへほ 実際 FireFox (2.0.0.6) ではこの通り表示されるのですが、 IE6では あいうえお かきくけこ さしすせと なにぬねの はひふへほ たちつてと という表示になってしまいます。 IEのバグなのか私の書き方がまずいのかよくわかりませんが、 IEでも意図通り表示させるためにはどのように直したらよいでしょうか？ よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
>.div2 >{ >width:100px; >clear:both; >float:left; >} clear:both と float:left が連続指定されていて宜しくない。 またNo1の回答では br はインライン要素であるので美しくない clear:both は より正しく表示させる為に単体で(brのように)用いる方が確実。 <html> <head> <style> .div1 { width:100px; float:left; } .div2 { clear:both; /*削除した*/ } </style> </head> <body> <div class="div1">あいうえお</div><!-- 元div2 --> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> <div class="div2></div> <div class="div1">たちつてと</div><!-- 元div2 --> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> <div class="div2></div> </body> </html>
その他の回答 (3)
No3に関する参考 外が囲っているclear:bothは外でのfloatに対するものだという所に注意 No2の修正cssだとして <div class="div1"><!-- box A --> <div class="div1">あいう</div><!-- box A-1 --> <div class="div1">かきく</div><!-- box A-2 --> <div class="div2"></div><!-- box A-3 --> <div class="div1">さしす</div><!-- box A-4 --> <div class="div1">たちつ</div><!-- box A-5 --> <div class="div2"></div><!-- box A-6 --> </div> <div class="div1"><!-- box B --> <div class="div1">なにぬ</div><!-- box B-1 --> <div class="div1">はひふ</div><!-- box B-2 --> <div class="div2"></div><!-- box B-3 --> <div class="div1">まみむ</div><!-- box B-4 --> <div class="div1">やゆよ</div><!-- box B-5 --> <div class="div2"></div><!-- box B-6 --> </div> <div class="div2"></div> ↑は概念的に↓のようになる。(ずれてたら等幅で見てね) ┌─────────Ａ┐┌─────────Ｂ┐ │┌──１┐┌──２┐││┌──１┐┌──２┐│ ││あいう││かきく││││なにぬ││はひふ││ │└───┘└───┘││└───┘└───┘│ │┌──４┐┌──５┐││┌──４┐┌──５┐│ ││さしす││たちつ││││まみむ││やゆよ││ │└───┘└───┘││└───┘└───┘│ └──────────┘└──────────┘ box3と6は空で2及び5にひっついて存在しfloatを解除している。 ただし描画系によっては解除してから3または6を描画するので空で有る方が良いのはそういう理由。 No3の3要素を囲む2つのdivは↑の図で言うAとBに相当するので↑のように外のboxも並べたい場合はNo3の後述しているIEの解釈(?)系ではうまく指定できない事になる。
お礼
詳しく教えて頂いてありがとうございました。 半分こんがらがってきましたが、 空のほうがいいというのは、なんとなく理解できたような気がします。 今回は、No.2の方法をとりたいと思います。
FirefoxでIEと同じ様に表示させるためには <html> <head> <style> .div1 { width:100px; float:left; } .div2 { width:100px; clear:both; float:left; } </style> </head> <body> <div style="float:left;"> <div class="div2">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> <div class="div2">たちつてと</div> </div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> </body> </html> こんな事に成るのかな、多分IEはこの様に解釈しているのかも。 かなり変だけれど。 <html> <head> <style> .div1 { width:100px; float:left; } .div2 { clear:both; } </style> </head> <body> <div class="div2"> <div class="div1">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> </div> <div class="div2"> <div class="div1">たちつてと</div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> </div> </body> </html> こんな書き方もありかと思います。
お礼
IEの挙動も謎ですが、No.2の方が指摘くださったように、 私の書き方もおかしかったのかなと思いました。 なるほど、こういう書き方もありますね。 参考になりました。ありがとうございます。
- kaesan
- ベストアンサー率45% (11/24)
これでいいかと思うのですが、 <br>は使いたくないということでしょうか？ <div class="div2">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div><br clear="all"> <div class="div2">たちつてと</div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div>
補足
意図通り表示できました。ありがとうございます。 brを使えば、divにはclear:bothを指定する必要もありませんね。 回避策は見つかったのでＯＫですが、 ただ、そもそもなぜこうなるのかが疑問です。 clear:bothが指定してあるのだから、 指定の仕方は間違っていないように私は思うのですが… そこが気になりますので、引き続き回答を受け付けたいと思います。
お礼
clear:both と float:left を連続指定してはいけないという話は知りませんでした。 このように間に１つ挟めばよかったのですね。 よくわかりました。ありがとうございます。