T.REX(ティーレックス) / MARC BOLAN(マーク・ボラン)のトリビュートサイト
Marc Bolan(本名Mark Feld)1947年9月30日生 1977年9月16日没。1970年代のグラムロックシーンを代表するアーティスト。 David Bowieらと共にグラムロック・ムーブメントを引き起こした。洗練された音楽・ファッション・詩からは、未だに新たなファンを生み出す神秘的な魅力(永遠のカリスマ)を感じさせる。

« NEWS from the other days. | メイン | 花舞うタカマドノテラ:第50回 高円寺阿波踊り »

2006年08月25日 | 投稿者 taku : 2006年08月25日 00:50

CSS スタイルシートメモ 「画像がはみ出る」件について。

近い将来、また「忘れた」と慌てる私に捧ぐ

サンプル スタイルシートを作っていると、なぜか画像がボーダーを超えるということがあります。
理由は単純で、WIDTH指定を怠っているから、という理由です。

というようり、コンテナ部分に不備があるからです。

具体的に、画像のボーダー超え(画像がはみ出る)とはどういう事かを説明すると、
右側の画像を見てください。
上がはみ出ている状態。
下が収まっている状態。

これを解決するのに、ああでもない、こうでもないと試行錯誤していた時期があり、
しかもその時は、やたらと長い馬鹿みたいな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をおきました。]

参考になればいいですが・・・