今までfloatプロパティでleft or rightを指定していた時の文字の回りこみ解除は＜br clear=”left” /＞などとやっていましたが、clearプロパティはブロック要素に対して指定するもので、br要素はインライン要素なので文法的には誤った使い方なんですって！
それに、画像がひとつの場合は不便を感じませんが、例えば右図の様に画像の右に文章を書き込んで、それを縦に複数並べる場合などはその都度回り込み解除しないとぐちゃぐちゃになってしまいます。
これはRif.3rdの記事ですが、当初DiigoのBlog this機能で画像と文章をそのまま引用したのですが、tableで囲んで画像の前で
XHTMLで、その
<br /> <br clear="left" /><br />
がひっかかってしまっていたので対処策を探してみました。
親要素であるdivのスタイルに zoom:100%; を記述するとIEでは、なぜか回り込みが解除されてしまいます。でも zoom は IＥ のみのため、firefox,opera等では使えません。
そこでfirefox,operaで使えてIEでは使えないdiv:after を 使って親要素に下記のようなスタイルを加えるとIＥ,firefox,opera で回り込みが解除されるんす。
Via: AOINA.COM :: css floatの回り込み解除を親要素で処理
<br />
/*-- grid box --*/<br />
.gbox { zoom: 100%;}<br />
.gbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden;}<br />
.gbox .gL { float: left;}<br />
.gbox .gR { float: right;}<br />
.gbox .g12 { float: left; width: 49.9%;}<br />
.gbox .g13 { float: left; width: 33.2%;}<br />
.gbox .g23 { float: left; width: 66.6%;}<br />
.gbox .g14 { float: left; width: 24.9%;}<br />
.gbox .g34 { float: left; width: 74.9%;}<br />
</p>
<div class="gbox" style="width:200px">
<img class="gL" src="hoge.gif" /></p>
<p>回り込みテキスト 回り込みテキスト 回り込みテキスト</p>
</p></div>
<p> ここで自動的に回り込み解除</p>
<div class="gbox">
<div class="g14">.g14は1/4</div>
<div class="g12">.g12は1/2 text text text text</div>
</p></div>
<p> ここで自動的に回り込み解除</p>
<div class="gbox">
<div class="g23">.g23は2/3</div>
<div class="g13">.g13は1/3 text text text text</div>
</p></div>
<p> ここで自動的に回り込み解除<br />
すばらしいです。冒頭の画像はこのdiv class=”gbox” で画像の img class=”gL” を囲むの繰り返しで整列させることができました。
また、divを1/4, 1/2, 2/3, 1/3と、サイズをCSSで設定しているので画像を使わない場合でも段落のように文章をきれいに整列できるんですね。
これは使い込めば使い込むほど便利になりそう。使い込みたいのであんちょこ代わりにコードをそのまま載せさせて頂きました。
Thanks for AOINA.COM :: wordpress, yomi-search, firefox etc.
5 コメント