いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > 画像+テキストの横並びレイアウトを汎用性の高いコーディングで実現するの巻

画像+テキストの横並びレイアウトを汎用性の高いコーディングで実現するの巻

よくある、画像とテキストのまわりこみレイアウト↓。

「あの、その、ボク、、、あの、その、実はボク、あの、その、、、」
「ふふっ。私のこと、好きなんでしょ?」
「え?ど、どうしてわかったの?」
「だって、いっつも私のこと見てるんだもん。」
「ハハッ、バレた?」

HTML

<div class="example03-box">
<p class="img"><img src="img/css_img04.png" width="150" height="123" /></p>
<p class="txt">「あの、その、ボク、、、あの、その、実はボク、あの、その、、、」<br />
「ふふっ。私のこと、好きなんでしょ?」<br />
「え?ど、どうしてわかったの?」<br />
「だって、いっつも私のこと見てるんだもん。」<br />
「ハハッ、バレた?」</p>
</div>

CSS

.example03-box {
  width: 400px;
  overflow: hidden;
  _zoom: 1; /*IE6バグ対策*/
  border: 1px solid DDDDDD;
  padding: 15px;
}
.example03-box .img {
  padding-right: 15px;
  float: left;
}
.example03-box .txt {
  overflow: hidden;
  _zoom: 1; /*IE6バグ対策*/
}

ポイントは、右に回りこむテキストのタグに、overflow: hidden;を設定して、
画像の下にテキストがまわりこむというのを防ぐところ。
この方法だと、ソースもシンプルだし、なんといっても画像の大きさが変わるたびに
いちいち新しいCSSを作らなくてもいいという汎用性に優れたコーディングの方法。
ちなみに、同じソースで、画像だけ変えてみても、右のテキストの幅は自動で伸縮されます。

「あの、その、ボク、、、あの、その、実はボク、あの、その、、、」
「ふふっ。私のこと、好きなんでしょ?」
「え?ど、どうしてわかったの?」
「だって、いっつも私のこと見てるんだもん。」
「ハハッ、バレた?」

↑ページトップへ

HOMEへ