回り込みについて(間隔が空く）

質問

下記のような内容(1)のhtmlをcssのfloatを利用して回り込みさせていますが、画像の縦幅より文字が多くなると画像の下にはみ出てしまいます。
tableタグは利用せずに、どのようにcssを指定することで回避できました。（２）既に一度質問をしています。
​http://okwave.jp/kotaeru.php3?qid=2419373​

しかし画像と文字の間に間隔が入ってしまい困っています。
間隔をあけないようにするにはどうしたら良いでしょうか。
marginやpaddingやwidthをいじりましたがその場しのぎのようでブラウザによってはうまく表示できません。

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

(2)
imgはfloat:left
textはfloat:right

<img src="■">aaaaa
↓結果
■＿＿aaa
＿＿＿aa
（アンダーパーはスペースを示す）
■とaaaにあるスペースを、10pxほどにしたい。

回答No.5

ratoa · ベストアンサー

右に寄せるという言い方は、良くなかったですね。
右に寄せる場合はfloat:rightでいいんですが、この場合、左に詰めたものの右に並べて置く訳だから、要素を左上から順番に詰めていってる状態ですよね。
つまり左詰めなので、float:leftです。

お礼

ありがとうございます。
いろいろ調べましたが、配置した反対側に後続の要素が回り込むみたいですね。
aaaaaの後続の要素にhrを置いていましたが、この場合hrに対してaaaaaが左に回りこんで、結果として左に詰まったと理解しました。

しかし、上記例では■とaaaaaは１つなのですが、hrを区切りに複数並べており、float:rightで間隔が開くものと開かないものがでるようで、これがバグなんだろうと理解しました。

回答No.4

ratoa

念のため#3の訂正です。
<img src="×××.gif" alt="" width="100" height="50" class="img1" />
この最後の /> はxhtmlの書き方なので、htmlでは普通に > でokです。
いつもの癖でつけちゃいました。

回答No.3

ratoa

【html】
<img src="×××.gif" alt="" width="100" height="50" class="img1" />
<div class="textbox">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

【css】
img.img1{
float:left;
}

div.textbox{
width:100px;
float:left;
padding-left:10px;
background:#999;
}

右に寄せたいからfloat:rightにするのではなく、float:leftに続く要素は同じくfloat:leftでOKです。

floatした要素にはwidthの指定も必須ですが、img要素はそれ自体に幅があるのでcss側では指定してません。

IEには、floatした要素と同じ側のmarginが倍になるというバグがあるのでpaddingにしています。つまりfloat:leftの場合、左側のmarginが倍になります。paddingが嫌な場合は、imgに対してmargin-rightを指定してください。

もうひとつのやり方として、floatに続く要素に画像の幅分のmarginを付けるという手もあります。

【css】
img.img1{
float:left;
}

div.textbox{
padding-left:110px;/*画像の幅+10px*/
background:#999;
}

お礼

ありがとうございます。
floatをrightからleftに直して、paddingを調整したら直りました＾＾

>右に寄せたいからfloat:rightにするのではなく、float:leftに続く要素は同じくfloat:leftでOKです。
なぜ、float:leftに続く要素は同じくfloat:leftでOKなんですか？

回答No.2

345itati

ちょっと丁寧に修正＾＾；

CSS部分

div {
width: ボックスの幅px;
clear: both;
}
.left {
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
border: none;
}

HTMLソース部分
<div><p><img src="■" class="left">あああああ<br>あああああ<br>ああああああ</p></div>
<div><p><img src="■" class="left">いいいいい<br>いいいいい<br>いいいいいい</p></div>

お礼

丁寧にありがとうございます。

回答No.1

345itati

<p><img src="■" style="float: left; padding-right:10px; border: none;">ああああ<br>あああああ<br>ああああ</p>

という感じでは？

padding-right:の記述で間隔調整出来るかと。

img {
float: left;
padding-right: 10px;
border: none;
}

で
<p><img src="■">あああああ<br>あああああ<br>ああああああ</p>

と別途記述の方がスマートですが。

お礼

ありがとうございます。
間隔で調整できないくらい何故か幅が空いてしまって＾＾；
無理に調整すればできることはできるのですがNo.3さんの仰るとおりバグのようです。