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

1. 使用CSS的display屬性
2. 使用Flexbox布局
3. 使用Grid布局

CSS布局技巧：如何并排展示兩張圖片

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將兩張圖片并排展示，使用CSS（層疊樣式表）可以輕松實現(xiàn)這一布局，本文將介紹幾種方法，幫助你實現(xiàn)圖片的并排展示。

使用CSS的display屬性

要實現(xiàn)圖片的并排展示，***簡單的方式是使用CSS的display屬性，將圖片的display屬性設(shè)置為inline-block或block，然后設(shè)置適當?shù)膶挾群瓦吘?，即可實現(xiàn)圖片的并排展示。

img {
  display: inline-block; /* 或者 block */
  width: 50%; /* 設(shè)置圖片寬度為容器寬度的50% */
  margin-right: 10px; /* 設(shè)置圖片之間的間距 */
}

使用Flexbox布局

Flexbox是一種強大的布局方式，可以輕松實現(xiàn)圖片的并排展示，將包含圖片的容器設(shè)置為flex布局，然后使用flex屬性將圖片并排展示。

.container {
  display: flex; /* 設(shè)置容器為flex布局 */
  justify-content: space-between; /* 圖片之間保持等距 */
}
img {
  width: 50%; /* 設(shè)置圖片寬度為容器寬度的50% */
}

使用Grid布局

Grid布局是另一種強大的布局方式，適用于復(fù)雜的網(wǎng)頁布局，使用Grid布局，可以輕松實現(xiàn)圖片的并排展示。

.container {
  display: grid; /* 設(shè)置容器為grid布局 */
  grid-template-columns: repeat(2, 1fr); /* 創(chuàng)建兩列等寬的網(wǎng)格 */
  gap: 10px; /* 設(shè)置網(wǎng)格之間的間距 */
}
img {
  width: 100%; /* 圖片寬度占滿網(wǎng)格單元格 */
}

三種方法都可以實現(xiàn)圖片的并排展示，你可以根據(jù)具體需求和場景選擇合適的方法，還可以通過調(diào)整CSS樣式，如調(diào)整圖片大小、邊距等，進一步優(yōu)化布局效果。