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

1. HTML結(jié)構(gòu)搭建
2. CSS樣式設(shè)置

CSS布局技巧：如何優(yōu)雅地展示四幅圖片分兩行

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要展示多幅圖片，而如何優(yōu)雅地將它們排列整齊，是一個(gè)值得探討的問題，本文將介紹如何使用CSS將四幅圖片分兩行展示，使頁面布局更加美觀和有條理。

HTML結(jié)構(gòu)搭建

我們需要在HTML中創(chuàng)建圖片的元素結(jié)構(gòu)，假設(shè)我們有四幅圖片，我們可以將它們放在兩個(gè)div容器中，每個(gè)div包含兩個(gè)圖片元素。

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

CSS樣式設(shè)置

我們使用CSS來控制這些圖片的樣式和布局，我們可以使用flex布局來實(shí)現(xiàn)圖片的橫向排列，并且使用媒體查詢來響應(yīng)不同的屏幕大小。

.image-row {
  display: flex;
  justify-content: space-between; /* 圖片間留有間距 */
}
.image-row img {
  width: 45%; /* 設(shè)置圖片寬度，留有空間防止圖片靠得太近 */
  height: auto; /* 保持圖片原始比例 */
}
/* 媒體查詢，當(dāng)屏幕寬度小于某個(gè)值時(shí)，將圖片改為垂直堆疊 */
@media (max-width: 600px) {
  .image-row {
    flex-direction: column; /* 將圖片排列方向改為垂直 */
  }
}

三 ***終結(jié)果展示：通過以上步驟，我們成功地將四幅圖片分兩行展示，在屏幕寬度較大時(shí)，圖片橫向排列；當(dāng)屏幕寬度較小時(shí)，圖片會垂直堆疊，以適應(yīng)不同的屏幕尺寸，這種布局方式既美觀又實(shí)用，能夠提升用戶體驗(yàn)，通過使用CSS的flex布局和媒體查詢，我們可以輕松地控制圖片的布局和樣式。