最近話題になっていた、ヨモツネットさんのCSSで簡単に上下中央揃えを実現する方法ですが、ちょっと別の使い道もあるなと思いました。

以下のような、テキストが画像の下に回り込まないで、画像の幅が可変(ページ毎に画像の幅が違うなど）なデザインの場合です。画像の幅が固定の場合すぐできるんですけどね。

そういうときにもこのハックが使えるかなと。ただ、元ネタのままのスタイルだとIEでテキストが長くなったとき、画像の下にテキストが落ちます（display:inlineなんだから当然っちゃ当然）。幅を指定すればいいんですが、今回は画像幅が可変という前提ですので、テキスト落ちを回避するために画像のボックスをfloatさせました。

デモページ

<div class="content">
<p class="image"><img src="xxx.gif" alt="画像" /></p>
<p class="textBody">本文本文本文本文本文本文本文本文本文本文本文（以下略）</p>
</div>

div.content {
  width: 400px;
}

div.content p{
  margin: 0;
}

div.content p.image {
  float: left;
}

div.content p.textBody {
  display: table-cell;
}

*html div.content p.textBody {
  display: inline;
  zoom: 1;
}

*:first-child+html div.content p.textBody {
  display: inline;
  zoom: 1;
}

どうだろう、使えるかな？しかしこのハック考え付いたアッキーさんはすごいな。

関連書籍

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
加藤 善規、平澤 隆、両見 英世

Prev Entry

IE6でmin-widthを実装する方法のまとめ

Next Entry

今更ながらjQueryのプラグインThickBox3.1

最近の記事

1. 第3回CakePHP勉強会にいってきた
2. Mac OS X（Leopard）のローカルにWordpressをインストールしたときのメモ
3. font-familyの憂鬱
4. DreamweaverCS4のベータ版でLiveView機能を試してみた
5. 第18回WebSig会議にいってきた
6. font-sizeのパーセント表記一覧
7. target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法
8. 今更ながらjQueryのプラグインThickBox3.1
9. 上下中央ハックの別の使い道
10. IE6でmin-widthを実装する方法のまとめ