第一個例子是將 <div> 中的元素水平排列。在 HTML 中，<div> 默認是一個塊級元素，即默認情況下會占整行的寬度。通過設置 CSS 的 display 屬性為 "flex"，可以將 <div> 變為一個彈性容器，從而實現水平排列的效果。
<style>
.container {
display: flex;
justify-content: center;
}
</style>
<div class="container">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>上述代碼中，我們給 <div> 添加了一個名為 "container" 的類，然后在 CSS 中設置了 display 屬性為 "flex"，并使用 justify-content 屬性告訴瀏覽器如何在水平方向上對齊這些 <div>。以上代碼將使 <div> 中的元素在水平方向上居中排列。
第二個例子是將 <div> 中的元素垂直排列。與水平排列不同，實現垂直排列需要使用 flex-direction 屬性來設置 <div> 的排列方向為垂直。下面是一個代碼示例：
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class="container">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</div>在上述代碼中，我們在 CSS 中使用 flex-direction 屬性將排列方向設置為垂直，而 align-items 屬性用于在垂直方向上對齊元素。該代碼將使 <div> 中的元素在垂直方向上居中排列。
上面的兩個代碼案例分別展示了如何通過簡單的 CSS 設置來調整 <div> 的水平和垂直排列方式。可以根據具體的需求，使用不同的 CSS 特性和屬性來實現更復雜的布局效果。
舉一個實際案例來說明，假設我們想要創建一個網格布局，其中 <div> 中的元素按照一定的行列數進行排列。以下是實現該效果的示例代碼：
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
</style>
<div class="container">
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
<div>元素4</div>
<div>元素5</div>
<div>元素6</div>
</div>在上述代碼中，我們使用了 CSS 的 grid 特性來實現網格布局。通過設置 grid-template-columns 屬性，我們可以指定每一列的寬度和數量。在這個例子中，我們設置了 3 列，每一列的寬度占據剩余空間的 1/3（1fr），并使用 grid-gap 屬性指定了元素之間的間隔。這樣就實現了按照 3 列進行網格排列的效果。
通過以上的示例，我們可以清晰地理解并應用 <div> 調整方向的相關技巧。無論是水平排列、垂直排列還是網格布局，都可以通過合適的 CSS 屬性和屬性值來實現。希望本文能夠幫助讀者更好地掌握和運用這些技術，提升網頁布局的靈活性和美觀度。