本文目錄導(dǎo)讀：

1. 使用CSS Flexbox布局
2. 使用CSS Grid布局

CSS實(shí)現(xiàn)圖片豎直排列的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將圖片豎直排列，以營(yíng)造特定的視覺(jué)效果，通過(guò)CSS，我們可以輕松地實(shí)現(xiàn)這一需求，下面，我們將詳細(xì)介紹如何使用CSS使一排圖片豎著排列。

使用CSS Flexbox布局

Flexbox布局是一種靈活的布局方式，可以輕松實(shí)現(xiàn)圖片的豎直排列，我們可以將包含圖片的div元素設(shè)置為flex容器，然后通過(guò)調(diào)整flex方向來(lái)實(shí)現(xiàn)圖片的豎直排列，示例代碼如下：

HTML結(jié)構(gòu)：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS樣式：

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image-container img {
  width: 100px;  /* 根據(jù)需要設(shè)置圖片寬度 */
  height: auto;  /* 保持圖片原始比例 */
  margin: 10px;  /* 圖片之間的間距 */
}

使用CSS Grid布局

CSS Grid布局也是一種實(shí)現(xiàn)圖片豎直排列的有效方式，我們可以將包含圖片的div元素設(shè)置為grid容器，然后通過(guò)調(diào)整grid的布局來(lái)實(shí)現(xiàn)圖片的豎直排列，示例代碼如下：

HTML結(jié)構(gòu)同上。

CSS樣式：

.image-container {
  display: grid;
  grid-template-columns: auto; /* 自動(dòng)調(diào)整列寬 */
  grid-gap: 10px; /* 圖片之間的間距 */
}

兩種方法都可以實(shí)現(xiàn)圖片的豎直排列，可以根據(jù)具體需求和場(chǎng)景選擇使用，還可以通過(guò)調(diào)整其他CSS屬性，如寬度、高度、間距等，來(lái)進(jìn)一步優(yōu)化視覺(jué)效果。