テキストの回り込みを維持しながら、コンテナの右下に Div を配置するにはどうすればよいですか?

コンテナの下部に Div を配置する: 総合ガイド

float:right または float を使用して要素をコンテナの上部にフローティングする:left は Web デザインでは一般的な方法です。ただし、フローティング要素に関連付けられた自然なテキストの回り込み動作 (テキストが上と左に折り返される) を維持しながら、コンテナの右下隅に div をフローティングするという要件がある場合、その作業は困難に思えるかもしれません。

最初は、float プロパティの底値がないにもかかわらず、このタスクは簡単であるはずだと考えるかもしれません。しかし、さまざまな技術を検討し、Web をくまなく調べた結果、唯一の実行可能な解決策は絶対位置決めであるように思えるかもしれません。ただし、このアプローチでは、望ましいテキストの回り込み動作が犠牲になります。

一般に信じられていることに反して、このデザイン パターンは、思われているほど珍しいものではありません。望ましい結果を達成するには、2 つのアプローチを採用する必要があります。

1. 親 div の位置を相対に設定します: これにより、親 div 内に相対座標系が確立されます。

2. 内部 div の位置プロパティを設定します: 次の CSS を適用します

   • position:Absolute;: これは、div をその親コン​​テナ内に絶対的に配置します。
   • bottom: 0;: これは、div をコンテナの一番下に固定します。親 div.

例実装:

<div class="parent-div">
<pre class="brush:php;toolbar:false">.parent-div {
  position: relative;  
}

.inner-div {
  position: absolute;
  bottom: 0;
}

このアプローチは、効果的に内部 div を親コンテナーの右下隅にフローティングし、必要なテキストの回り込み動作を維持します。