floatした画像の下揃えについて

質問

こんにちは。

HTMLとCSSで添付した画像のようなレイアウトを組みたいと考えているのですが、
CSSでfloat:rightを指定した画像を下揃えにする方法が分からず、詰まっています。

position:absolute;等で画像を絶対位置指定する方法なども試みてみたのですが、
文章が上手く回りこまないため、何か良い方法など知っておりましたら教えてください。

回答No.1

naokita · ベストアンサー

p{ margin:0;}
#section1,#section2{ line-height: 2;}
#section1 div,#section2 div{ width: 400px; min-height: 184px;}

<div id="section1">
<p>あいうえおかきくけこさしすせそたちつてとなにぬねの。。</p>
<div style=" background: url(green.gif) no-repeat 100% 100%;">
<p style="padding-right: 115px;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも、、あいうえおかきくけこさしすせそたちつてと。。</p>
<p style="padding-right: 200px; background: url(blue.jpg) no-repeat 198px 100%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも。。</p>
</div>
<hr />
<div id="section2">
<p>あいうえおかきくけこさしすせそたちつてとなにぬねの。。</p>
<div style="position: relative;">
<p style="width: 18em;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも、、あいうえおかきくけこさしすせそたちつてと。。</p>
<p style="width: 200px;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも。。</p>
<img src="blue.jpg" width="87" height="93" alt="*" style=" position: absolute; right: 115px; bottom: 0;" />
<img src="green.gif" width="115" height="184" alt="*" style=" position: absolute; right: 0px; bottom: 0;" />
</div>

-----------------------------------------------
floatしたら底辺があわなくなります。
やっぱり、文章を各ブロック分けしないといけません。
ただ、この場合に文章の文字数（行）を考慮しないと画像位置が行段落の高さによって下がっていきます。
これでもFxで文字サイズ変更されたらずれますが・・・

お礼

２案も出して頂いてありがとうございます。
背景画像にする案も良さそうですが、section2の案でdivの幅を十分に取って、
画像にマージンを設定すれば上手く行きそうな気がします。
しかし、フォントのサイズもそうですが、フォントの種類によっても結構ずれてしまいますね。
いっその事、全部画像にするのが一番手っ取り早いかもしれません。
ご回答どうもありがとうございました！