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を作らなくてもいいという汎用性に優れたコーディングの方法。
ちなみに、同じソースで、画像だけ変えてみても、右のテキストの幅は自動で伸縮されます。
「あの、その、ボク、、、あの、その、実はボク、あの、その、、、」
「ふふっ。私のこと、好きなんでしょ?」
「え?ど、どうしてわかったの?」
「だって、いっつも私のこと見てるんだもん。」
「ハハッ、バレた?」
© netdehatch.com