画像の下に文字を回り込ませないテクニック

2010年10月21日

floatで画像などを左右に回り込ませたとき、逐一marginの幅を指定せずとも文字が画像の下に回り込まないようにするテクニックです。

HTML

1<div class="sample01">
2<div class="sampleImg"><img src="./sample.jpg" alt="サンプル画像" /></div>
3<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>  
4</div>

CSS

01.sample01 {
02    width: 400px;
03    border: 1px solid #CCCCCC;
04    padding: 10px;
05    margin-bottom: 30px;
06    overflow: hidden;
07    zoom: 1;
08}
09.sample01 p {
10    overflow: hidden;
11    zoom: 1;
12}
13.sampleImg {
14    float: left;
15    margin: 0 10px 5px 0;
16}

テキストを囲っている要素（この場合はpタグ）にoverflow: hidden;を指定することで画像の下に回り込むことを防ぐことができます。

サンプルページ