divが入れ子にならない!!
divを入れ子にして書いていると、せっかく入れ子にしたのにはみ出てるじゃありませんか!有名なバグです・・・
こんなときはclearfixで解決!
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
とし、
HTML
<div id="wrapper" class="clearfix">
<div id="content">
<p>content</p>
</div>
<div id="menu">
<p>menu</p>
</div>
</div>
こんな風にすればOK!divの入れ子なら迷わずclearfixで!ちなみに、ページの上下に原因不明のスペースが混在してしまっている場合は、
.clearfix:after {
content: "";
display: block;
clear: both;
}
などを使ってみてください。
divが入れ子にならない!! の関連記事
No related items.
コメント
No comments yet
コメントする
次項 CSSは全ての要素について記述する
前項 【EC-CUBE】注文メールはBCCで届く
▲知識Z(ゼータ)トップへ