横並びにした画像にテキストが回りこまないようにする方法

|

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。 説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

  1. marginで指定
  2. overflowで指定

以下にサンプル画像を示します。

サンプル画像

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード


<div class="column">
<img src="image.gif" alt="" />
<p>
テキストテキストテキストテキストテキスト
・・・(略)・・・
テキストテキストテキストテキストテキスト
</p>
</div>

1.marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

2.overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

「zoom:1;」はIE6でレイアウトが崩れるのを防ぐために指定します。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事