<div>是HTML中常用的元素，用于創建不同的布局，并且為頁面的不同部分提供樣式和結構。在默認情況下，一個div元素內的內容是從上到下依次排列的，但是有時我們希望將div的內容垂直對齊到底部，這就是“div下端對齊”的概念。
下面我將分別用幾個實例來詳細解釋這個概念，并展示如何實現div下端對齊的效果。
第一個實例是使用CSS的flexbox布局來實現div下端對齊。通過設置容器的display屬性為flex，并設置align-items屬性為flex-end，可以使div內的內容垂直對齊到底部。
下面是具體的代碼示例：

<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.container {
display: flex;
align-items: flex-end;
height: 200px;
border: 1px solid black;
}
.box {
width: 100px;
height: 50px;
border: 1px solid red;
}
</style>

在上述代碼中，我們創建了一個名為container的父級div，使用flexbox布局，并設置align-items屬性為flex-end。div內部有三個子級div，它們會垂直對齊到底部。通過設置container的高度為200px，我們可以看到這三個子級div在容器的底部對齊。
第二個實例是使用CSS的position屬性來實現div下端對齊。通過將父級div的position屬性設置為relative，子級div的position屬性設置為absolute，并設置bottom屬性為0，可以將子級div相對于父級div的底部對齊。
下面是具體的代碼示例：

<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid black;
}
.box {
position: absolute;
bottom: 0;
width: 100px;
height: 50px;
border: 1px solid red;
}
</style>

在上述代碼中，我們同樣創建了一個名為container的父級div，設置其position屬性為relative。子級div的position屬性設置為absolute，并且設置bottom屬性為0，使其相對于父級div的底部對齊。通過設置container的高度為200px，我們可以看到這三個子級div在容器的底部對齊。
以上就是兩個實現div下端對齊的例子。這兩種方法都可以很好地實現div下端對齊的效果，具體使用哪種方法取決于具體的需求和頁面結構。在實際應用中，我們可以根據需要選擇適合的方法，并結合其他CSS屬性和技巧來實現更復雜的布局效果。