<div>標簽是HTML中的一個容器標簽，常用于將頁面內容劃分為不同的塊。在網頁設計中，有時需要將多個圖片以豎排的方式進行展示。這時可以使用<div>標簽來實現圖片的豎排效果。下面將通過幾個代碼案例來詳細解釋如何使用<div>標簽實現圖片豎排。
代碼案例一： 假設有三張圖片img1.jpg、img2.jpg和img3.jpg，我們希望將它們以豎排的方式顯示在網頁上。我們可以使用<div>標簽來分別包裹每張圖片：

<div>
<img src="img1.jpg">
</div>
<div>
<img src="img2.jpg">
</div>
<div>
<img src="img3.jpg">
</div>

在上述代碼中，每個<div>標簽包裹了一張圖片，將它們垂直排列在網頁上。通過設置每個<div>標簽的樣式，還可以調整圖片之間的間距、大小等效果。
代碼案例二： 如果希望圖片在豎排的同時可以對齊居中，可以在包裹圖片的<div>標簽中使用CSS樣式來實現。例如，以下代碼將三張圖片在豎排的同時居中對齊：

<style>
.img-container {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<br>
<div class="img-container">
<img src="img1.jpg">
</div>
<div class="img-container">
<img src="img2.jpg">
</div>
<div class="img-container">
<img src="img3.jpg">
</div>

在上述代碼中，我們新增了一個CSS樣式類.img-container，并將其應用到包裹圖片的<div>標簽上。通過display: flex; align-items: center; justify-content: center;這些樣式，實現了圖片在豎排的同時水平居中對齊。
代碼案例三： 如果希望圖片在豎排的同時可以水平居中，并且圖片之間的間距也希望能夠調整，可以使用CSS樣式來實現。以下代碼將三張圖片在豎排的同時水平居中，且圖片之間有一定的間距：

<style>
.img-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
</style>
<br>
<div class="img-container">
<img src="img1.jpg">
</div>
<div class="img-container">
<img src="img2.jpg">
</div>
<div class="img-container">
<img src="img3.jpg">
</div>

在上述代碼中，我們新增了一個CSS樣式類.img-container，并將其應用到包裹圖片的<div>標簽上。通過display: flex; align-items: center; justify-content: center; gap: 20px;這些樣式，實現了圖片在豎排的同時水平居中對齊，并且圖片之間有20像素的間距。
通過以上幾個代碼案例，我們可以看到如何使用<div>標簽實現圖片的豎排效果。根據需求，可以通過設置<div>標簽的樣式來調整圖片之間的排列方式，包括對齊方式和間距大小等。<div>標簽作為一個容器標簽，在網頁設計中有很大的靈活性，可以用于實現各種布局效果，包括圖片豎排。