HOME > WEBデザイン・制作 > WEBデザインのネタ > 画像の横の文章が回り込まないようにする

画像の横の文章が回り込まないようにする

画像の横幅が変わっても対応できるのがすごい便利ですね。

HTML

<div class="floatTest">
<p class="ftLeft"><img src="icon.jpg" /></p>
<p class="ftRight">
文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。
文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。
文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。
</p>
</div>

CSS

.floatTest {
width: 536px;
border: 2px solid #990000;
padding: 5px 10px;
margin: 10px 0;
_zoom: 1;
overflow: hidden;
}
.ftLeft {
float: left;
margin: 0 10px 0 0;
}
.ftRight {
overflow: hidden;
_zoom: 1;
}

文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。文章が多くても回り込まない。