在網頁設計中，經常需要使用 CSS 來布局頁面。其中一種常見的布局方式是豎著排列三個 div：一個在最上面、一個在中間、一個在最下面。

<div class="container">
<div class="box box1">
<p>這里是第一個 div </p>
</div>
<div class="box box2">
<p>這里是第二個 div </p>
</div>
<div class="box box3">
<p>這里是第三個 div </p>
</div>
</div>

實現這個布局的關鍵在于 CSS。我們可以使用 flexbox 來實現。具體操作如下：

.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.box {
width: 200px;
height: 100px;
border: 1px solid black;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: yellow;
}
.box3 {
background-color: green;
}

以上代碼中，我們首先將 container 設置為 flex 布局，并使用 flex-direction 屬性將子元素豎直排列。我們使用 justify-content 和 align-items 屬性來控制子元素的水平和垂直對齊。

對于每個子元素，我們設置了寬度、高度和邊框，以及不同的背景顏色。這樣，我們就成功實現了豎著排列三個 div 的布局。