<div>元素是在 HTML 中使用最多的標簽之一，它是用來分割文檔中的不同部分的，比如頭部、導航、內容和底部等等。在很多情況下，我們希望將<div>元素的內容底部對齊，讓頁面呈現更加美觀。本文將詳細介紹如何使用CSS實現<div>底部對齊的效果，并給出幾個案例來進行說明。
，我們可以使用flex布局來實現<div>底部對齊。在<div>元素的父元素上設置display屬性為flex，然后使用align-items屬性設置為flex-end，這樣可以使<div>元素沿著主軸（默認為水平方向）的底部對齊。以下是示例代碼：

<style>
.container {
display: flex;
align-items: flex-end;
}
</style>
<br>
<div class="container">
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

上述代碼中，我們將<div>元素的父元素設置為.container類，并將其display屬性設置為flex，align-items屬性設置為flex-end，這樣其中的<div>元素就會底部對齊。你可以根據實際需要自由調整容器的樣式和元素的數量。
另外，我們還可以使用絕對定位來實現<div>底部對齊。在<div>元素的樣式中，設置position為absolute，bottom為0，這樣可以使<div>元素相對于其包含塊的底部對齊。以下是示例代碼：

<style>
.container {
position: relative;
height: 200px;
}
<br>
    .box {
position: absolute;
bottom: 0;
}
</style>
<br>
<div class="container">
<div class="box">內容</div>
</div>

上述代碼中，我們將.container類的position屬性設置為relative，這樣可以將其作為包含塊。然后在.box元素的樣式中，設置position為absolute，bottom為0，這樣.box元素就會相對于.container元素底部對齊。你可以根據實際需要自由調整容器的高度和樣式。
除了上述兩種方法，我們還可以使用表格布局來實現<div>底部對齊。在<div>元素的父元素上設置display屬性為table-cell，然后使用vertical-align屬性設置為bottom，這樣可以使<div>元素底部對齊。以下是示例代碼：

<style>
.container {
display: table-cell;
vertical-align: bottom;
}
</style>
<br>
<div class="container">
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

上述代碼中，我們將<div>元素的父元素設置為.container類，并將其display屬性設置為table-cell，vertical-align屬性設置為bottom，這樣其中的<div>元素就會底部對齊。你可以根據實際需要自由調整容器的樣式和元素的數量。
綜上所述，我們可以使用flex布局、絕對定位和表格布局來實現<div>底部對齊的效果。根據實際需要選擇其中一種方法即可，同時可以根據不同的場景和要求進行靈活調整，以達到理想的展示效果。希望本文對你在實現<div>底部對齊時有所幫助！</div>