<div> で テキストを下揃えにすることはできますか？

質問

CSSでレイアウトを指定しています。
<div>内のテキスト表示位置についてご存知の方がいらしたら教えて下さい。
言葉では分かりづらいかと思いますのでサンプルのページも用意しました。
どうぞよろしくお願いいたしますm(_ _)m

【やりたいこと】
画像の横に長めのテキスト（折り返しあり）を入力する。
テキストを画像の下部に合わせて（下揃えで）表示させたい。

【できないこと】
テキストが上揃えになってしまう。

【避けたいこと】
テキストの上に透明GIFを入れてスペースを空けることは避けたいと思っています。
画像とテキストは<div>タグでくくっていますが、できれば<div>の縦サイズを固定したくないと思っています。
なるべくシンプルな指定方法だととても嬉しいです。

【サンプルページ】
http://question.oteage.net/090426.html

回答No.2

x_lady007 · ベストアンサー

質問者様のサンプルページに合わせるとこんな感じでしょうか。

▼css
--------------------------------------
<style type="text/css">
.frame {
padding: 5px;
border: 1px solid #ccc;
}
.pic {
/*親にrelative又はabsoluteを指定*/
position: relative;
width: 475px;
}
.pic p {
/*後はabsoluteで下からの位置を指定*/
position: absolute;
bottom: 0; right: 0;
width: 203px; /*任意値*/
margin: 0; padding: 0; /*初期化していれば不要*/
}
</style>
--------------------------------------

▼html
--------------------------------------
<div class="pic">
<img src="img/bird.jpg" alt="" width="260" height="260" class="frame" />
<p>我が輩は猫である。名前はまだ無い。<br />ニャーニャーニャーニャー。</p>
</div>
--------------------------------------

お礼

x_lady007さん、コードまで書いていただきまして有り難うございました。
自己解決案は<div>の入れ子だったのですが、<p>で指定した方がスッキリしますね。
widthの指定は避けたい（写真のサイズがまちまちなため）ので、少し触ってみたいと思います。
どうも有り難うございました！

回答No.1

noname#100277

色々方法は在りますが以下の語句で検索。
「画像の横 下揃え」
コレを純粋にHTMLのみで適応させるか、CSS適応させるかでも違いが出る。
尚、CSSで適応なら「CSS 画像の横 下揃え」と入力。

お礼

aidesさん、早々に有り難うございました。
検索してみましたが、自分の質問ばかり表示されていたり
少し違う内容だったり…　という状態でした。
向学のために似たようなケースも見てみたいと思います。