回り込みについて

質問

下記のような内容(1)のhtmlをcssのfloatを利用して回り込みさせていますが、画像の縦幅より文字が多くなると画像の下にはみ出てしまいます。
tableタグは利用せずに、どのようにcssを指定すれば回避できるでしょうか。
ちなみに(2)ならばはみ出ません。

(1)
<img src="■">aaaaa
↓結果
■aaa
aa

(1)
<img src="■">aaa
↓結果
■aaa

回答No.1

ygyo0078 · ベストアンサー

divでくくって記述すればいいと思います。

まずCSSで

.wrapper {
margin: 0;
padding: 0;
width: (全体の横幅指定)px;
}

.left {
margin: 0;
padding: 0;
float: left;
width :(左側の横幅指定)px;
}

.right {
margin: 0;
padding: 0;
float: left;
width :(右側の横幅指定)px
}

.clear {
clear: both;
}

と記述します。

htmlは

<div class="wrapper">
<div class="left"><img src="■"></div>
<div class="right">aaaaa</div>
<div class="clear"></div>

これで下に回りこまずにできるはずです。

回り込みを解除しているのは、floatを適用させた要素がFireFox等の新しいブラウザで表示がおかしくなるのを防ぐためです。（float適用要素が長くなると、下に突き抜けた表示になってしまう）

参考になればと思います。

お礼

うまくいきました！ありがとうございました。