實現 div 上下顯示的效果通常可以利用 CSS 樣式來實現。通過設置 div 元素的 display 屬性為 flex 或 grid，我們可以實現將其子元素在垂直方向（上下）進行布局展示的效果。
下面我們將通過幾個代碼案例來詳細解釋說明。
案例1：使用 Flexbox 布局
，我們創建一個父容器 div，讓它的 display 屬性為 flex，這樣它的子元素就可以基于 flexbox 布局進行排列。

html
<pre>
<p><div class="container"></p>
<p>  <div class="item">Item 1</div></p>
<p>  <div class="item">Item 2</div></p>
<p></div></p>

為了實現上下顯示的效果，我們可以設置子元素的 flex-direction 屬性為 column。

css
<pre>
<p>/* CSS 樣式表 */</p>
<p>.container {</p>
<p>  display: flex;</p>
<p>  flex-direction: column;</p>
<p>}</p>
<p>.item {</p>
<p>  margin: 10px;</p>
<p>  padding: 10px;</p>
<p>  background-color: #eee;</p>
<p>}</p>

通過這樣的設置，子元素（Item 1 和 Item 2）將會在父容器的垂直方向上進行排列展示。
案例2：使用 Grid 布局
除了使用 Flexbox 布局，我們還可以使用 CSS Grid 布局來實現 div 上下顯示的效果。
，我們創建一個父容器 div，讓它的 display 屬性為 grid，這樣它的子元素就可以基于 grid 布局進行排列。

html
<pre>
<p><div class="container"></p>
<p>  <div class="item">Item 1</div></p>
<p>  <div class="item">Item 2</div></p>
<p></div></p>

為了實現上下顯示的效果，我們可以設置父容器的 grid-template-rows 屬性。

css
<pre>
<p>/* CSS 樣式表 */</p>
<p>.container {</p>
<p>  display: grid;</p>
<p>  grid-template-rows: auto auto;</p>
<p>}</p>
<p>.item {</p>
<p>  margin: 10px;</p>
<p>  padding: 10px;</p>
<p>  background-color: #eee;</p>
<p>}</p>

通過這樣的設置，子元素（Item 1 和 Item 2）將會在父容器的垂直方向上進行排列展示。
：
通過上述兩個案例，我們可以看到，將 div 上下進行布局展示可以通過設置父容器的 display 屬性為 flex 或 grid，并根據需求設置其他相關的樣式屬性來實現。這樣的布局方式相對靈活，可以滿足不同場景下的需求。希望本文可以幫助您更好地理解和應用 div 上下顯示的效果。