画像回り込み

sneakattack_large

写真などの画像の横にテキストを流して配置する方法2つ。

1.画像に直接floatを使う

HTML

<p><img src="dummy.jpg" class="imgL">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<hr>
<p><img src="dummy.jpg" class="imgR">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS

hr {
    clear: both;
}
.imgL {
    float: left;
    margin: 0 1em 1em 0;
}   
.imgR {
    float: right;
    margin: 0 0 1em 1em;
}   

表示サンプル

サンプルhtml

画像回り込みのサンプル1

2.テキストが画像の下に回り込まないようにfloatを使う

HTML

<div class="floatImage">
<p class="flL"><img src="images/dummy.gif"></p>
<div>
<p>画像を左に配置した場合。</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<!-- /.floatImage --></div>

<div class="floatImage">
<p class="flR"><img src="images/dummy.gif"></p>
<div>
<p>画像を右に配置した場合。</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
<!-- /.floatImage --></div>

CSS

.floatImage,
.floatImage > div {
    overflow: hidden;
}
.flL {
    float: left;
}   
.flR {
    float: right;
}   
.floatImage .flL img {
    margin: 0 1em 0 0;
}   
.floatImage .flR img {
    margin: 0 0 0 1em;
}   

表示サンプル

サンプルhtml

画像回り込みのサンプル2

シェアする

  • このエントリーをはてなブックマークに追加

フォローする