イメージ周りのレイアウトがうまくいきません

質問

お世話になります。
イメージの右側にコメントの文章を載せたいのですが、イメージに回り込んだり、イメージの下に配置してしまったりとうまく行きません。
http://www.hotpegasus.com/test/test.html
私のイメージの画像を貼りますのでアドバイスをお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.1

metametamu · ベストアンサー

floatについて考えていきます。
今のところfloatを指定する時には一緒にwidthを指定することが定石になっています。
ブラウザごとの挙動を理解せずにfloat単体で使うのは難しいと思います。

見たところfloatが必要なのは.imglefatだけで、他のfloatは全て必要ありません。
floatは後続する要素の配置に影響は出ますが、それより前にある要素には影響がありません。
なので.commentにfloatを指定しても、一段改行された後に配置されてしまいます。

さらにfloatをを指定された要素は通常の配置方法とは別の法則で配置されます。
そして、通常の配置の中で、その高さは無いものとして考えられてしまいます。

つまり今のソースは.commentが右に寄っているが高さが0なので下のボックスにかぶっているという状態です。

前のほうにも書いていますが、floatはそれ自身より前にある要素には影響が出ません。
なので.imglefatにfloatを指定してしまえばいいのです。（余白の取り方などは後に書きます）
それだけで.comment内の文章は自然と右によってくれます。

ここで一つやっておかないといけないことがあります。
floatは特殊な配置方法なので、それを終えるためにclearというプロパティが用意されています。
これを使わないと文章が少ないときに.imglefatが次の.commentに重なってしまうことがあります。
ただし、clearはfloatを指定した兄弟要素に指定しなくてはならないので.commentの次にある要素に指定しなくてはいけません。
今回の場合それがないので、特殊な対処法を利用します。
.entryにoverflow:hidden;を指定してください。一番簡単な対処法です。
これを指定すれば文章が少なくてもはみ出さないはずです。

いままでで基本的に大まかなレイアウトは出来ていると思うのですが、細かい部分でちょっとテクニックが必要になってきます。
floatを指定した.imglefatにはwidthも一緒に指定しなくてはいけません。
ですが、widthを指定した要素にはpaddingを一緒に指定しないほうがレイアウトの崩れを起こしにくいのです。
現状ではpadding利用されているのでこれにひっかかってしまいます。
そこでwidthには画像の幅を指定し、paddingの代わりにmarginを使ってください。
そして一緒にdisplay:inline;を指定してください。
floatした要素にmarginを指定する時はdisplay:inline;を一緒に指定するとブラウザごとの表示の差を吸収してくれます。

これで画像の右のようなレイアウトになっていると思います。

お礼

細かなアドバイスをありがとうございました。
width指定することで解決出来ました。