<div> 垂直排列是指在網頁開發中，將多個元素按照垂直方向依次排列的布局方式。這種排列方式常常用于制作導航欄、列表、卡片等網頁元素。在實現垂直排列時，可以通過一些CSS屬性和技巧來實現，下面將介紹幾個常用的方法。
第一種方法是使用display屬性和flexbox布局。通過將父元素設置為display: flex;，并設置flex-direction: column;，使得子元素按照垂直方向排列。以下是一個示例代碼：

<div style="display: flex; flex-direction: column;">
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
</div>

上述代碼中，display: flex;將父元素設置為彈性布局，flex-direction: column;將子元素按照垂直方向排列。通過修改子元素的樣式，可以實現對排列方式、間距、對齊等的調整。
第二種方法是使用display屬性和grid布局。通過將父元素設置為display: grid;，并設置grid-template-rows: auto;使得子元素按照垂直方向自動分配行高。以下是一個示例代碼：

<div style="display: grid; grid-template-rows: auto;">
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
</div>

上述代碼中，display: grid;將父元素設置為網格布局，grid-template-rows: auto;使得子元素的行高根據內容自動分配。通過修改父元素和子元素的樣式，可以實現對網格布局的進一步調整。
第三種方法是使用position屬性和top、left等定位屬性。通過將子元素設置為絕對定位，然后使用top、left等屬性控制元素的位置，可以將多個元素按照垂直方向排列。以下是一個示例代碼：

<div style="position: relative;">
<p style="position: absolute; top: 0;">內容1</p>
<p style="position: absolute; top: 30px;">內容2</p>
<p style="position: absolute; top: 60px;">內容3</p>
</div>

上述代碼中，使用position: relative;設置父元素為相對定位，再將子元素分別設置為絕對定位，并通過top屬性控制其位置。通過修改top屬性的值，可以調整子元素在垂直方向的位置。
通過上述的代碼案例，我們可以看到使用display、flexbox、grid布局以及position屬性，都可以實現div的垂直排列。這些方法各有特點，具體使用時可以根據實際的需求進行選擇和調整。在網頁開發中，靈活運用這些方法，可以方便地實現各種垂直排列的布局效果。