<div>標簽是HTML中的一個重要元素，常用于劃分和組織網頁中的內容。它可以包含其他HTML元素，并通過CSS樣式來設置其外觀和布局。其中一個常見的應用場景是將多個<div>元素豎向排列顯示。下面將通過幾個代碼案例來詳細說明如何實現<div>豎排顯示的效果。
案例一： 在HTML中，可以使用CSS的flex布局來實現<div>的豎排顯示。當將一個<div>元素設置為flex容器，并將其內部的元素設置為flex項目時，可以通過設置容器的flex-direction屬性為“column”，使內部元素垂直排列。

<p>案例一：</p>
<pre>
<style>
.container {
display: flex;
flex-direction: column;
}
</style>
<br>
<div class="container">
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

以上代碼中，將包裹在.container中的<div>元素依次顯示在豎直方向上。
案例二： 另一種方法是使用CSS的grid布局系統。通過將容器設置為grid容器，并使用grid-template-columns屬性設置列寬，可以將所有的<div>元素垂直排列在一列中。

案例二：

<style>
.container {
display: grid;
grid-template-columns: 1fr;
}
</style>
<br>
<div class="container">
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

以上代碼中，將包裹在.container中的<div>元素在垂直方向上依次排列，并且每個元素所占據的寬度都是相等的。
案例三： 還有一種方法是使用CSS的grid布局系統，通過設置容器的grid-auto-flow屬性為“column”，可以將所有的<div>元素按列排列。
`

案例三：

<style>
.container {
display: grid;
grid-auto-flow: column;
}
</style>
<br>
<div class="container">
<div>內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

以上代碼中，將包裹在.container中的<div>元素按列排列顯示。
： 通過上述三個案例的演示，我們可以看到，使用flex布局或grid布局可以方便地實現<div>元素的豎排顯示。根據實際布局需求選擇合適的布局方法，可以靈活地實現網頁中的元素排列和布局。本文提供的案例僅作為參考，具體實現的效果還需要根據實際情況進行調整和優化。