<div>部分的內容在HTML中是以盒模型呈現的，也就是說，<div>元素可以包含其他元素，并將它們組織在一起。通常情況下，這些元素在<div>中是垂直方向上按照默認的順序排列的，即從上到下。然而，有時候我們希望將<div>中的<div>元素在底部對齊，而不是默認的頂部對齊。這里將通過幾個代碼案例來詳細解釋如何實現這一效果。
讓我們來看一個簡單的例子。假設我們有一個<div>元素，其中包含兩個子元素：<div class="box">和<div class="bottom">。默認情況下，這兩個子元素會垂直排列，頂部對齊。現在我們希望將<div class="bottom">元素在底部對齊，而不是默認的頂部對齊。

html
<div class="container">
<div class="box">Content 1</div>
<div class="bottom">Content 2 (Bottom)</div>
</div>

為了實現這個效果，我們可以使用CSS的flexbox布局。，我們將父元素<div class="container">設置為flex容器，并使用flex-direction屬性將元素在垂直方向上排列。然后，我們將子元素<div class="box">設置為flex項，并使用flex屬性將元素在垂直方向上拉伸，以占據剩余空間。最后，我們將子元素<div class="bottom">設置為相對定位，并使用align-self屬性將該元素自身對齊到flex容器的底部。

css
.container {
display: flex;
flex-direction: column;
height: 300px;
}
<br>
.box {
flex: 1;
background-color: gray;
}
<br>
.bottom {
position: relative;
align-self: flex-end;
background-color: red;
}

在上面的代碼中，我們通過設置容器的高度為300px來模擬一個有限的高度，以便更好地展示效果。在實際應用中，您可以根據需要調整容器的高度。
通過應用以上CSS規則，我們成功地將<div class="bottom">元素在容器的底部對齊了。您可以嘗試修改容器的高度，觀察元素的對齊效果。
除了使用flexbox布局，我們還可以使用絕對定位來實現<div>中的<div>在底部對齊。以下是另一個示例。

html
<div class="container">
<div class="box">Content 1</div>
<div class="bottom">Content 2 (Bottom)</div>
</div>

css
.container {
position: relative;
height: 300px;
}
<br>
.box {
background-color: gray;
}
<br>
.bottom {
position: absolute;
bottom: 0;
background-color: red;
}

與之前的例子相比，這里使用了position屬性將父元素設置為相對定位，并將子元素設置為絕對定位。通過設置子元素的bottom屬性為0，我們將<div class="bottom">元素對齊到父元素的底部。
以上是兩個實現<div>中的<div>在底部對齊的例子。您可以根據具體的需求選擇適合您的方法。無論使用flexbox布局還是絕對定位，您都可以通過簡單的CSS規則實現所需的效果。希望本文對您有所幫助！