CSSで画像を下に配置

質問

CSSで画像を枠内の右下に配置したいのですが、どのように表記したらよいでしょうか？
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

画像などを、それが含まれる当該親ブロック内でfloatさせ、かつ右下におきたいのでしょうが、それは不可能です。
　floatプロパティでは、最上位に位置することが定められています。
「A floating box must be placed as high as possible. ( http://www.w3.org/TR/CSS2/visuren.html#float-position )」

　通常文中の挿絵に関しては、次のようにマークアップされていると思います。
[HTML5]
<section>
　<hn>見出し</hn><!-- nは1～6 sectionには見出しがあるべき -->
　<p>段落</p>
　<p>段落</p>
　<figure><img></figure>
　<p>段落</p>
　<p>段落</p>
</section>
<section>
　<hn>見出し</hn><!-- nは1～6 -->
　<p>段落</p>
　<p>段落</p>
・・・以下省略
[HTML4]だと
<div class="section">
　<hn>見出し</hn><!-- nは1～6 -->
　<p>段落</p>
　<p>段落</p>
　<div class="figure"><img></div>
　<p>段落</p>
　<p>段落</p>
</div>
<div class="section">
　<hn>見出し</hn><!-- nは1～6 -->
　<p>段落</p>
　<p>段落</p>
・・・以下省略

この場合、
figure{float:right;width*300px;}
section{clear:right;}
もしくは
div.figure{float:right;width*300px;}
div.section{clear:right;}
とします。

　これは、文書構造上、回り込みされる挿絵は、常にその対象となる記事の直前にあるはずだからです。
　次のsectionでは、その挿絵は関係ないのですから、sectionが変わる時点でfloatを解除します。

　そうすることで、ウィンドウ巾やフォントサイズが変わっても常に該当する記事の側で、記事を回りこませることが出来ます。

お礼

不可能なんですね。
丁寧なご説明ありがとうございました。

回答No.2

noname#158634

＞<div>～</div>の間で設定したいのですが。
だからpositionだと言っていますよね。<div>とか関係ないから。
少しは考えるか試すかしてください。
https://www.google.com/search?q=css+%E7%94%BB%E5%83%8F+%E4%BD%8D%E7%BD%AE+position

補足

同じページをもう調べて試してみました。
テキストを画像のように回り込んで表示したいのです。

回答No.1

noname#158634

position

補足

<div>～</div>の間で設定したいのですが。
どうでしょうか。