[css]floatの回り込み解除を親要素で処理
floatの回り込み解除は基本的に解除したいところでclearを指定すると回り込みが解除されます。
下記の場合はh2のスタイルに clear: both; を記述することで回り込みが解除されます。
HTML:
しかしながら、floatした要素に関係のないh2のスタイルに記述することが不自然であり、また記述を忘れてしまうんです。
親要素のスタイルを変更
親要素であるdivのスタイルに zoom:100%; を記述するとIEでは、なぜか回り込みが解除されてしまいます。でも zoom は IＥ のみのため、firefox,opera等では使えません。
そこでfirefox,operaで使えてIEでは使えないdiv:after を 使って親要素に下記のようなスタイルを加えるとIＥ,firefox,opera で回り込みが解除されるんです。
CSS:
-
div { zoom: 100%;}
-
div:after { content: " "; clear: both; height: 0; display: block; visibility: hidden;}
ということで、「子要素内でfloatされても指定した要素の後は自動的にclearしてください」というスタイルをclass="gbox"でまとめて
CSS:
-
/*-- grid box --*/
-
.gbox { zoom: 100%;}
-
.gbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden;}
-
.gbox .gL { float: left;}
-
.gbox .gR { float: right;}
-
.gbox .g12 { float: left; width: 49.9%;}
-
.gbox .g13 { float: left; width: 33.2%;}
-
.gbox .g23 { float: left; width: 66.6%;}
-
.gbox .g14 { float: left; width: 24.9%;}
-
.gbox .g34 { float: left; width: 74.9%;}
この場合class="gbox"を与えた要素の後は自動的に回りこみ解除されます。
sample
上記のcssをとりあえず埋め込んでおけばブログ記事内でも簡単に段組ができてしまいます。
HTML:
回り込みテキスト 回り込みテキスト 回り込みテキスト
ここで自動的に回り込み解除
.g14は1/4
.g12は1/2 text text text text
ここで自動的に回り込み解除
.g23は2/3
.g13は1/3 text text text text
ここで自動的に回り込み解除
classは class="content gbox"のように複数指定できるので便利かも
Tags: css
4
(11件)
Loading ...
