floatの指定による不具合

divを左右に浮かべてならべる為に、
floatを使うと思います。

でもfloatを私用すると、
背景の設定がうまくいかなかったり、
指定したはずのborder-bottomが表示されなかったり・・・

[img align=left]http://www.obitastar.co.jp/uploads/img4732c045aa6c7.gif[/img] それは、左図のようになっているせいかもしれません。

浮かべているdivを囲んだdiv(左図:赤点線)が、
中のdivの高さに連動できていないのです。

なので、
赤点線のdivに背景やborder-bottomなどを指定していても
中のdivに邪魔されて表示されません。

では、ここからが解決法です!

赤点線のdivを中のdivの高さに連動させるには、
赤点線のdivにfloat:left;を追加すること!!

これだけです :-o

[img align=left]http://www.obitastar.co.jp/uploads/img4732c05480732.gif[/img] これだけで、
左図のように赤点線のdivが
中のdivの高さにつられてくれます :lol:

魔法の言葉、
float: left;です :-D

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください