<div 低端對齊"是一種用于HTML和CSS中的布局技術，它可以讓多個元素在一個容器中水平對齊，并且他們的底部對齊。與傳統的上對齊或底對齊相比，這種布局方式可以給網頁帶來獨特的外觀和風格。在本文中，我們將通過幾個代碼案例詳細介紹div 低端對齊的用法和效果。
，我們來看一個簡單的示例。在下面的代碼中，我們有一個包含三個div元素的容器，它們的高度不同。我們希望這三個div元素在容器中水平對齊，并且它們的底部對齊。

<div class="container">
<div class="box" style="height: 100px;"></div>
<div class="box" style="height: 150px;"></div>
<div class="box" style="height: 200px;"></div>
</div>

為了實現div 低端對齊，我們可以使用CSS的flexbox布局。，我們需要將容器設置為display: flex，這樣容器中的元素將按照一行的方式排列。然后，我們使用align-self: flex-end屬性將每個元素的底部對齊。

.container {
display: flex;
}
<br>
.box {
align-self: flex-end;
}

上面的代碼將產生一個效果，即三個div元素水平對齊，并且它們的底部對齊。
接下來，讓我們看一個更復雜的示例。假設我們需要在網頁中創建一個照片墻，其中包含不同高度和寬度的圖片。我們希望這些圖片在每一行中水平對齊，并且它們的底部對齊。

<div class="photo-wall">
<div class="photo" style="width: 200px; height: 150px;"></div>
<div class="photo" style="width: 150px; height: 200px;"></div>
<div class="photo" style="width: 250px; height: 100px;"></div>
<div class="photo" style="width: 300px; height: 180px;"></div>
<div class="photo" style="width: 180px; height: 250px;"></div>
</div>

為了實現照片墻的低端對齊效果，我們可以使用CSS的grid布局。，我們將容器設置為display: grid，并且指定網格的列數和行高。然后，我們將每個圖片元素放置在網格中。

.photo-wall {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
}
<br>
.photo {
align-self: end;
}

上面的代碼將創建一個網格，每一行中的圖片將水平對齊，并且它們的底部對齊。網格的列數會根據容器的大小自動調整，確保圖片可以適應容器的寬度。
通過以上兩個案例，我們可以看到div 低端對齊在布局中的一些應用。無論是簡單的水平對齊還是復雜的照片墻，使用div 低端對齊可以給網頁帶來獨特的外觀和風格。這種布局技術與CSS的flexbox和grid布局相結合，可以輕松實現這種效果。希望本文能夠幫助你理解和應用div 低端對齊的方法和技巧。