No.1ベストアンサー
- 回答日時:
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で文字サイズ変更されたらずれますが・・・
2案も出して頂いてありがとうございます。
背景画像にする案も良さそうですが、section2の案でdivの幅を十分に取って、
画像にマージンを設定すれば上手く行きそうな気がします。
しかし、フォントのサイズもそうですが、フォントの種類によっても結構ずれてしまいますね。
いっその事、全部画像にするのが一番手っ取り早いかもしれません。
ご回答どうもありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
CSSで3分割した背景画像を配置...
-
widthやheightの数値に単位(px...
-
横スクロールサイトの中央寄せ
-
divの中にspanを右寄せにするに...
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
CSS(0の単位)について
-
borderをページの下まで伸ばしたい
-
ライトボックスでスクロールバー
-
safariだけ、cssが効きません!
-
paddingがきかない。
-
CSSでiframe要素の編集
-
ウインドウを小さくするとbody...
-
form input テキストを上下中央...
-
余分な縦スクロールバーが出て...
-
メイン画像とグローバルメニュ...
-
divで囲まれたpaddingの指定を...
-
スクロールボックスを中央に配...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報