floatについて
-
0 名前： てつ ： 2006/08/04（金） 02:40 ID:wGM0FOrs
- あるボックス(sotowaku)の中に二つの横に並んだボックス(box1,box2)を作り、
sotowakuが縦にいくつか並ぶという状態を作りたいのです。
普通に思い浮かぶのはfloatを使用したやり方だと思いますが、
条件として、
・全てのボックスはボーダーを表示する
・中身のボックス二つは内容によって高さが変わる
という事があった場合、うまくいかずに困っております。
【HTMLソース】
<div class="sotowaku">
<div class="box1">あいうえお</div>
<div class="box2">かきくけこ</div>
</div>
<div class="sotowaku">
<div class="box1">あかさたな</div>
<div class="box2">はまやらわ</div>
</div>
上記のソースに対してどのようなスタイルシートを適用するかですが、
まず、
【スタイルシート１】
.sotowaku{
border:1px solid #000000;
}
.box1{
border:1px solid #000000;
float:left;
}
.box2{
border:1px solid #000000;
}
これだとFireFoxで表示したときに、
sotowakuのボーダーが中身のboxを囲う形にならず、
boxの裏側にめり込む形になってしまいます。
boxの高さは可変の為、sotowakuのheightを固定することは出来ません。
【スタイルシート２】
.sotowaku{
border:1px solid #000000;
}
.box1{
border:1px solid #000000;
float:left;
}
.box2{
border:1px solid #000000;
float:left;
}
とし、box2の直後に
<div style="clear:left;"></div>
を加えるという邪道な方法。
これだとちゃんとsotowakuのボーダーが中身を囲ってくれますが、
IEで表示したときに、一部表示が消えたりというバグがあるようで使えません。
他にもいろいろ試行錯誤するのですが答えが出ません。
何か良い方法はないものでしょうか。
-
1 名前： カヅサツ ◆ThCi95HEzw ： 2006/08/04（金） 02:40 ［URL］ ID:f0UXxXRM
- 以下のページが参考になると思います。
http://www.geocities.jp/multi_column/
-
2 名前： てつ ： 2006/08/04（金） 02:40 ID:wGM0FOrs
- ありがとうございます。
ご紹介のサイトも既に見ておりましたが、
http://www.fromdfj.net/html/usecss3.html
ここにもかかれているとおり、
IEでfloatとclearを組み合わせたレイアウトを行うと
表示がバグることが稀にあり、
使えずに困っております。
-
3 名前： 通行人その１ ： 2006/08/04（金） 02:40 ID:XqUE.y4n
- .box1と.box2に幅（width）を設定しても駄目ですか？
もしくは、更に邪道ですが、.box1と.box2に、（CSSハックなどを利用して）IEのみheight:1px；を指定するとか。
（IEで表示がバグるというのは、IEのいわゆるpeakabooバグのことですかね。）
-
4 名前： 通行人その１ ： 2006/08/04（金） 02:40 ID:XqUE.y4n
- ↑訂正。
誤 .box1と.box2に幅（width）を設定
正 .sotowakuに幅(width)を設定
-
5 名前： カヅサツ ◆ThCi95HEzw ： 2006/08/04（金） 02:40 ［URL］ ID:f0UXxXRM
- > 既に見ておりましたが、
http://www.geocities.jp/multi_column/float/01.html
> CSS2 の仕様によるとフロートの幅は明確に指定しなければなりません（img 要素などそれ自体に幅をもつ場合を除く）。 幅が明確でないフロートをどのように表示するかはブラウザによって異なります。
> float を指定したボックスには必ず width も指定しましょう。
-
6 名前： てつ ： 2006/08/04（金） 02:40 ID:wGM0FOrs
- みなさまお答えありがとうございます。
幅固定などの方法もいろいろ試したのですが、
全てのボックスの幅を指定してもやはり、
FireFoxではsotowaku高さが０になってしまい、
sotowakuとしての機能を果たしません。
やはりいちいちsotowakuの高さを一つ一つ指定するしかないのでしょうか。
＞通行人その一さん
peakabooバグって言うんですか？
そのまま検索サイトで検索しても出てこなかったのですが、
IEでfloatとclearを組み合わせてレイアウトを行った場合、
その前後のborderの表示が消えたり、文字が消えたりします。
ちょっとスクロールしてまた戻ってくると見えたりします。
-
7 名前： 通行人その１ ： 2006/08/04（金） 02:40 ID:XqUE.y4n
- ぶひゃひゃ、申し訳ない。スペルミス^^;;;;;
× peakaboo
○ peekaboo …いないいないばあ
ちうわけで、「peekabooバグ」でもう一度ググって下さい。
まことにすみませんでした。
-
8 名前： mick ： 2006/08/04（金） 02:40 ID:ujKXnpi7
- http://www.geocities.jp/multi_column/float/05.html
＞フロートの親ボックスは高さの算出時に子のフロートを含めない。
ですね。
・コンテナブロックに overflow
・コンテナブロックに float
・生成内容で clear
など方法はあります。
http://www.fsiki.com/archive/css-doc/float.html
がまとまっていると思います。
