«  日展に行く | トップページ | 横並びリンクをボーダーで区切る »

2009年3月10日 (火)

clearfix

よく忘れるのでおなじみのCSSハックをメモ。

画像をfloatさせてその横にテキストを置こうとすると背景が途中でとぎれることがある。

そんなときに便利なのが「clearfix」というハック手法。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1% }
.clearfix { display:block;}
/* End hide from IE-mac */

実際には

<div class="clearfix">

<p><img src="***" "alt=""></p>
おいしいパスタはいかが?

</div>

というように使用する。

«  日展に行く | トップページ | 横並びリンクをボーダーで区切る »

03 アプリケーション」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/514829/44297791

この記事へのトラックバック一覧です: clearfix:

«  日展に行く | トップページ | 横並びリンクをボーダーで区切る »