如何將 Div 放置在其容器的右下角，同時保持文字換行？

將Div 放置在容器底部：綜合指南

使用float:right 或float 將元素浮動到容器頂部:left 是網頁設計中的常見做法。然而，當要求將 div 浮動到其容器的右下角，同時保持與浮動元素相關的自然文字換行行為（文字在上方和左側換行）時，這項任務可能看起來令人畏懼。

最初，人們可能會認為這項任務應該很簡單，儘管浮動屬性缺乏底部值。然而，在探索各種技術並蒐索網路之後，似乎唯一可行的解​​決方案涉及絕對定位。然而，這種方法犧牲了所需的文本換行行為。

與一般看法相反，這種設計模式並不像看起來那麼罕見。為了達到我們想要的結果，我們必須採用兩管齊下的方法：

1. 將父div的位置設定為相對：這會在父div內建立一個相對座標系。

2. 設定內部div的定位屬性：將以下CSS屬性套用到內部div:

   • 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 浮動到其父容器的右下角，保持所需的文字換行行為。