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

1. 使用flex布局
2. 使用grid布局

CSS上下排列兩張圖片的方法

在CSS中，我們可以使用flex布局或者grid布局來實現(xiàn)兩張圖片的上下排列，下面我將分別介紹這兩種方法。

使用flex布局

我們需要將圖片的容器設(shè)置為flex布局，可以通過在容器元素上添加display: flex;來實現(xiàn)，我們可以將兩張圖片分別添加到容器中，并通過align-items: flex-start;來設(shè)置圖片在容器中垂直排列的起點。

使用grid布局

另一種方法是使用grid布局，我們可以將圖片的容器設(shè)置為grid布局，并通過grid-template-rows: auto 1fr;來設(shè)置容器的高度。auto表示***個圖片的高度，1fr表示第二個圖片的高度，這樣，兩張圖片就會按照設(shè)定的比例在容器中垂直排列。

需要注意的是，在使用grid布局時，我們需要確保兩張圖片的高度比例合適，否則可能會出現(xiàn)圖片重疊或者空白的情況。

使用flex布局或者grid布局都可以實現(xiàn)兩張圖片的上下排列，具體使用哪種方法取決于你的需求和布局需求。