これで安心回りこみ解除

2007/04/07 5 コメント カテゴリ: DESIGN

sumple今までfloatプロパティでleft or rightを指定していた時の文字の回りこみ解除は＜br clear="left" /＞などとやっていましたが、clearプロパティはブロック要素に対して指定するもので、br要素はインライン要素なので文法的には誤った使い方なんですって！
それに、画像がひとつの場合は不便を感じませんが、例えば右図の様に画像の右に文章を書き込んで、それを縦に複数並べる場合などはその都度回り込み解除しないとぐちゃぐちゃになってしまいます。
これはRif.3rdの記事ですが、当初DiigoのBlog this機能で画像と文章をそのまま引用したのですが、tableで囲んで画像の前で
を使うコードでした。
XHTMLで、その

PLAIN TEXT
HTML:
  1. <br clear="left" />

がひっかかってしまっていたので対処策を探してみました。

親要素であるdivのスタイルに zoom:100%; を記述するとIEでは、なぜか回り込みが解除されてしまいます。でも zoom　は IＥ のみのため、firefox,opera等では使えません。
そこでfirefox,operaで使えてIEでは使えないdiv:after を 使って親要素に下記のようなスタイルを加えるとIＥ,firefox,opera で回り込みが解除されるんす。

Via: AOINA.COM :: css floatの回り込み解除を親要素で処理

PLAIN TEXT
CSS:
  1. /*-- grid box --*/
  2. .gbox       { zoom: 100%;}
  3. .gbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden;}
  4. .gbox .gL   { float: left;}
  5. .gbox .gR   { float: right;}
  6. .gbox .g12 { float: left; width: 49.9%;}
  7. .gbox .g13 { float: left; width: 33.2%;}
  8. .gbox .g23 { float: left; width: 66.6%;}
  9. .gbox .g14 { float: left; width: 24.9%;}
  10. .gbox .g34 { float: left; width: 74.9%;}

PLAIN TEXT
HTML:
  1. <div class="gbox" style="width:200px">
  2.         <img class="gL" src="hoge.gif"  />
  3.         <p>回り込みテキスト 回り込みテキスト 回り込みテキスト</p>
  4.       </div>
  5.       ここで自動的に回り込み解除
  6.  
  7.       <div class="gbox">
  8.         <div class="g14">.g14は1/4</div>
  9.         <div class="g12">.g12は1/2 text text text text</div>
  10.       </div>
  11.       ここで自動的に回り込み解除
  12.  
  13.       <div class="gbox">
  14.         <div class="g23">.g23は2/3</div>
  15.         <div class="g13">.g13は1/3 text text text text</div>
  16.       </div>
  17.       ここで自動的に回り込み解除

すばらしいです。冒頭の画像はこの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 レスポンス

コメントする

  1. 　Rikaさんこんばんは！　ご機嫌麗しゅう…あれ？

    もうね、過去記事全部消しちゃおうかなー

    　ええっ消しちゃうんですか!?
    　とはいえ、私も今のブログに移行するときに以前のブログのログを継承しませんでしたので人のことは言えませんが…。

    　止めはしませんが、個人的には考え直していただきたいと思います。自分にとって小こちらは貴重な情報源の一つでありますから…。

    返信
    テルミナ 2008 3 20 at 23:26 パーマリンク

  2. テルミナ兄さん、こんばんは。
    もうね、過去記事全部消しちゃおうかなー ;;(

    返信
    Rika 2008 3 20 at 22:22 パーマリンク

  3. 　あ、「after」指定の存在をすっかり忘れていました！

    　わざわざ空のdiv要素とスタイルclassを用意して回り込み解除をしてきた自分が情けないです（苦笑）。

    　あと、本文中で不自然に切れている箇所が2カ所ほどありますね（ぉぃ）。

    返信
    テルミナ 2008 3 19 at 02:14 パーマリンク

  4. び！
    えっと・・・
    探せばあるにはあるんですが・・・ :-|)

    返信
    Rika 2008 3 18 at 22:57 パーマリンク

  5. みぃつけた！まだ途中だと思うけどさぁ、このエントリーの画像のリンクがおかしいっす

    返信
    yutaka 2008 3 17 at 17:42 パーマリンク

コメントをどうぞ

Commenter Gravatar