プロが教えるわが家の防犯対策術!

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

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

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

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

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

A 回答 (2件)

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



▼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>
--------------------------------------
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/04/26 18:43

色々方法は在りますが以下の語句で検索。


「画像の横 下揃え」
コレを純粋にHTMLのみで適応させるか、CSS適応させるかでも違いが出る。
尚、CSSで適応なら「CSS 画像の横 下揃え」と入力。
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/04/26 18:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!