float:right(またはleft)を使って、コンテナの上部に画像や挿入ボックスを浮かせたことは何度もあります。最近、他のdivの右下にdivをフロートさせる必要が出てきました。その際、floatで得られる通常のテキストラップ(テキストは上と左にのみラップされる)を使用します。
floatにはbottomの値がないので、比較的簡単にできると思ったのですが、いろいろなテクニックを使ってもできず、ウェブで検索しても、絶対位置指定を使う以外には何も出てきませんでした。
これは非常に一般的なデザインだと思っていたのですが、どうやらそうではないようです。もし誰も提案してくれなければ、テキストを別々のボックスに分割して、divを手動で整列させるしかありませんが、これはかなり不安定で、必要なページすべてでそれをしなければならないのは嫌ですね。
EDIT: ここに来る人のために注意しておきます。重複していると思われる上のリンク先の質問は、実際には重複していません。テキストが挿入要素に回り込むという要件により、全く異なるものになっています。実際、ここでトップに選ばれた回答への回答を見ると、リンク先の質問の回答がこの質問への回答としては間違っていることがよくわかります。いずれにしても、この問題に対する一般的な解決策はまだないようですが、ここに掲載されている解決策や、リンク先の質問にある解決策のいくつかは、特定のケースでは有効かもしれません。
親divをposition: relative
に設定し、次に内側divを...に設定します。
position: absolute;
bottom: 0;
...これで完成です :)
数日前から様々な手法を試してみましたが、やはり無理のようです。javascriptを使っても(やりたくないけど)無理なようです。
私が探しているのは、以下のようなものです。出版業界では、挿入物(絵、表、図など)をレイアウトして、その底面がブロック(またはページ)のテキストの最終行の底面と一致するようにし、テキストが挿入物の周りを上下左右に自然な形で流れるようにすることがよくあります。html/cssでは、floatスタイルを使ってはめ込みの上部とブロックの上部を並べるのは簡単ですが、驚いたことに、テキストとはめ込みの下部を並べるのは、一般的なレイアウト作業であるにもかかわらず、不可能なようです。
誰かが最後の提案をしてくれない限り、私はこのアイテムのデザイン目標を見直さなければならないでしょう。