« NEWS from the other days. | メイン | 花舞うタカマドノテラ：第50回 高円寺阿波踊り »
2006年08月25日 | 投稿者 taku : 2006年08月25日 00:50
CSS スタイルシートメモ 「画像がはみ出る」件について。
近い将来、また「忘れた」と慌てる私に捧ぐ
スタイルシートを作っていると、なぜか画像がボーダーを超えるということがあります。というようり、コンテナ部分に不備があるからです。
具体的に、画像のボーダー超え（画像がはみ出る）とはどういう事かを説明すると、
右側の画像を見てください。
上がはみ出ている状態。
下が収まっている状態。
右側の画像を見てください。
上がはみ出ている状態。
下が収まっている状態。
これを解決するのに、ああでもない、こうでもないと試行錯誤していた時期があり、
しかもその時は、やたらと長い馬鹿みたいなCSSになってしまっていました。
枠の部分のラベルを"lm_cnt"とすると、下記のようなCSSで解決出来ます。
コンテナ部分に
overflow: auto; と付け加えます。
CSSのソース
#cbox {
width:400px;
padding:8px;
border:1px solid #555555;
margin-bottom:10%;
overflow: auto;
}
#snap {
width:200px;
border:1px solid #984525;
padding:6px;
margin:0px 8px 4px 0px;
float:left;}
[こちらにサンプルHTMLをおきました。]参考になればいいですが・・・