CSSでレイアウトを指定しています。
<div>内のテキスト表示位置についてご存知の方がいらしたら教えて下さい。
言葉では分かりづらいかと思いますのでサンプルのページも用意しました。
どうぞよろしくお願いいたしますm(_ _)m
【やりたいこと】
画像の横に長めのテキスト(折り返しあり)を入力する。
テキストを画像の下部に合わせて(下揃えで)表示させたい。
【できないこと】
テキストが上揃えになってしまう。
【避けたいこと】
テキストの上に透明GIFを入れてスペースを空けることは避けたいと思っています。
画像とテキストは<div>タグでくくっていますが、できれば<div>の縦サイズを固定したくないと思っています。
なるべくシンプルな指定方法だととても嬉しいです。
【サンプルページ】
http://question.oteage.net/090426.html
No.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>
--------------------------------------
x_lady007さん、コードまで書いていただきまして有り難うございました。
自己解決案は<div>の入れ子だったのですが、<p>で指定した方がスッキリしますね。
widthの指定は避けたい(写真のサイズがまちまちなため)ので、少し触ってみたいと思います。
どうも有り難うございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript Javascriptを使ってQRコード読み取り、取得した情報をPOSTしたいと思っています。 1 2023/04/28 15:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
PNGがうまく表示されない・・・。
-
<hr>の縦バージョンはありますか?
-
HTMLです 店主のこだわりという...
-
背景画像をリピートさせない方...
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
画像の上にテキスト配置で、拡...
-
CSSで背景画像をランダムに表示...
-
背景画像がずれる現象について
-
webページ作っているのですが、...
-
background-sizeの背景で最小値...
-
コーディング中、右側に謎の余...
-
背景を固定し文章だけをスクロール
-
ボタン(画像)をクリックする...
-
スクロールバー
-
背景部分を透けさせてデスクト...
-
画像で背景透明のテキストがに...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報