<div 上下顯示是指在網頁布局中，將內容分為上下兩部分并進行顯示的方式。
在HTML中，可以使用div元素來創建包裹內容的容器。div元素本身沒有特定的樣式，但可以通過CSS樣式來設置寬度、高度、邊距等屬性，從而實現不同的布局效果。
下面將通過幾個代碼案例來詳細解釋div上下顯示的方式。
案例一：

下面的代碼演示了如何通過CSS樣式將div元素分為上下兩部分并進行顯示。

<code>
<style>
.container {
display: flex;
flex-direction: column;
height: 200px;
background-color: lightgray;
}
<br>
            .top-section {
flex: 1;
background-color: lightblue;
}
<br>
            .bottom-section {
flex: 1;
background-color: lightgreen;
}
</style>
<br>
        <div class="container">
<div class="top-section">
<p>這是上部分內容</p>
</div>
<div class="bottom-section">
<p>這是下部分內容</p>
</div>
</div>
</code>

在這個案例中，通過將div的display屬性設置為flex，使其成為一個彈性容器。然后通過設置flex-direction屬性為column，將子元素在垂直方向上進行排列。 .容器上部分和下部分的高度都設置為相等的flex: 1，使它們在垂直方向上等分剩余的空間，從而實現上下顯示的效果。

案例二：

下面的代碼演示了如何通過CSS樣式將div元素分為上下兩部分并進行顯示，并且使用百分比單位來設置高度。

<code>
<style>
.container {
height: 300px;
background-color: lightgray;
}
<br>
            .top-section {
height: 50%;
background-color: lightblue;
}
<br>
            .bottom-section {
height: 50%;
background-color: lightgreen;
}
</style>
<br>
        <div class="container">
<div class="top-section">
<p>這是上部分內容</p>
</div>
<div class="bottom-section">
<p>這是下部分內容</p>
</div>
</div>
</code>

在這個案例中，通過將div上部分和下部分的高度都設置為50%來等分整個容器的高度。這樣無論容器的高度如何變化，上下兩部分的高度都會適應并保持相等。

參考其他文章真實案例：

下面的代碼是一個真實的案例，展示了一個網頁中使用div上下顯示的布局方式。

<code>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: 400px;
background-color: lightgray;
}
<br>
            .top-section {
background-color: lightblue;
}
<br>
            .bottom-section {
background-color: lightgreen;
}
</style>
<br>
        <div class="container">
<div class="top-section">
<p>這是上部分內容</p>
</div>
<div class="bottom-section">
<p>這是下部分內容</p>
</div>
</div>
</code>

在這個案例中，通過將div的display屬性設置為grid，將其作為網格容器顯示。然后使用grid-template-columns和grid-template-rows屬性設置兩行一列的網格布局。通過設置gap屬性為10px，可以在每個單元格之間添加間距。 .容器上部分和下部分的背景顏色設置為不同的顏色，使它們在布局中更加明顯區分。

：

在網頁布局中，div上下顯示是一種常見的布局方式。通過使用CSS樣式和一些布局屬性，我們可以輕松地將內容分為上下兩部分并進行顯示。以上案例僅為演示，實際應用中可以根據具體需求進行調整和擴展。