<div> 列對齊是一種常用的網頁布局技術，它可以將頁面中的元素按照水平或垂直方向進行排列和對齊。通過使用 CSS 中的 div 元素和相關的樣式屬性，我們可以輕松實現不同排列方式的頁面布局。
下面將通過幾個代碼案例來詳細解釋和說明 div 列對齊的使用。
第一個案例是實現 div 元素的水平對齊。在 HTML 代碼中，我們創建了三個 div 元素，它們分別包含了一個文本內容。為了實現水平對齊，我們通過設置樣式屬性 "display: inline-block;" 來讓這三個元素在同一行內顯示。代碼如下所示：

<div style="display: inline-block;">Hello</div>
<div style="display: inline-block;">World</div>
<div style="display: inline-block;">!</div>

在瀏覽器中運行上述代碼，我們可以看到 "Hello World!" 這三個文本內容在同一行內水平對齊顯示。
第二個案例是實現 div 元素的垂直對齊。在 HTML 代碼中，我們繼續使用三個 div 元素，并且設置它們的樣式屬性 "display: inline-block;"。為了實現垂直對齊，我們通過設置樣式屬性 "vertical-align: middle;" 來讓這三個元素在垂直方向上居中對齊。代碼如下所示：

<div style="display: inline-block; vertical-align: middle;">Hello</div>
<div style="display: inline-block; vertical-align: middle;">World</div>
<div style="display: inline-block; vertical-align: middle;">!</div>

運行上述代碼，我們可以看到 "Hello World!" 這三個文本內容在垂直方向上居中對齊顯示。
第三個案例是實現 div 元素的等高對齊。在實際開發中，常常遇到同一行內有多個 div 元素，但它們的高度不一致，導致頁面排版不美觀。為了解決這個問題，我們可以使用 CSS 的 flexbox 布局來實現等高對齊。代碼如下所示：

<div style="display: flex;">
<div>Hello</div>
<div>World</div>
<div>!</div>
</div>

在上述代碼中，我們通過設置外層 div 元素的樣式屬性 "display: flex;" 來開啟 flexbox 布局。這樣，內層的 div 元素會自動等高對齊顯示。
通過上述幾個案例的說明，我們了解了如何使用 div 元素和相關的樣式屬性來實現水平對齊、垂直對齊和等高對齊。掌握了這些技巧，我們可以更方便地進行網頁布局的設計和開發。