テキストボックスを画像の下に回り込ませない方法

画像のサイズが変わっても、隣接するテキストボックスは画像の下に回り込まず、なおかつ、テキストボックスのサイズが画像に合わせて自動的に変わる方法をご紹介します。

HTML

下記の通りHTMLを記述します。

 
<div class="box">
	<img src="images/text_wrap.jpg" alt="" />
	<p>text text text text text text text text...</p>
</div>
 

CSS

テキストボックスである<p>要素にoverflow: auto;を指定します。IE6にも適用させたい場合はzoom: 1;を追加します。たったこれだけで、テキストが画像の下に回り込むといったことがなくなります。

 
.box {
	width: 400px;
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 5px;
	border: 1px solid #2F2A04;
	background: #EFF2DF;
}
 
.box img {
	float: left;
	margin: 0px 10px 0px 0px;
}
 
.box p {
	overflow: auto;	/* for modern browser */
	zoom: 1;	/* for ie6 */
	line-height: 1.5;
}
 

サンプル

大きい画像から小さい画像に差し替えることになっても、テキストが折り返すことはなくなるので、簡単に更新作業ができます。

画像の下にテキストが回りこまないサンプル

blog comments powered by Disqus