在網頁設計中，經常要展示多張圖片。<div>元素可以用來創建一個容器，將多張圖片放在同一個<div>中。通過設置<div>的樣式，可以實現不同的布局和展示效果。

下面是幾個使用<div>來展示多張圖片的代碼案例：

案例一：九宮格布局

<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
<br>
  .image {
width: 100%;
height: auto;
}
</style>
<br>
<div class="grid">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
<img class="image" src="image4.jpg" alt="Image 4">
<img class="image" src="image5.jpg" alt="Image 5">
<img class="image" src="image6.jpg" alt="Image 6">
<img class="image" src="image7.jpg" alt="Image 7">
<img class="image" src="image8.jpg" alt="Image 8">
<img class="image" src="image9.jpg" alt="Image 9">
</div>

上述代碼使用了網格布局來實現九宮格效果。通過設置<div>的樣式為display: grid;，可以將其中的圖片按照指定的行列數進行排列。每個圖片都有一個共同的樣式類image，通過該類可以設置圖片的寬度和高度。

案例二：幻燈片輪播

<style>
.slider {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
}
<br>
  .slider .images {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
<br>
  .slider .image {
flex: 0 0 100%;
width: 100%;
height: 100%;
}
</style>
<br>
<div class="slider">
<div class="images">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
<img class="image" src="image4.jpg" alt="Image 4">
</div>
</div>

上述代碼使用了絕對定位和Flex布局來實現幻燈片輪播效果。通過設置<div>的樣式為position: relative;和overflow: hidden;，創建了一個可視區域。其中的<div>元素images使用絕對定位，覆蓋在可視區域之上。通過設置寬度為100%和使用Flex布局，實現了圖片的水平排列。通過調整<div>的樣式transition，可以添加動畫效果。

案例三：網格列表

<style>
.grid-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
}
<br>
  .image {
width: 100%;
height: auto;
}
</style>
<br>
<div class="grid-list">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
<img class="image" src="image4.jpg" alt="Image 4">
<img class="image" src="image5.jpg" alt="Image 5">
<img class="image" src="image6.jpg" alt="Image 6">
</div>

上述代碼使用了網格布局中的auto-fit屬性和minmax函數來自適應容器寬度。通過設置<div>的樣式為grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));，實現了圖片在一行內自適應寬度，同時保持最小寬度為300px。這樣可以在不同的屏幕尺寸下，自動調整每行圖片的數量。

：

通過使用<div>元素，可以輕松地實現多圖片展示的布局和效果。根據具體的需求，可以選擇不同的布局方式，如網格布局、幻燈片輪播和網格列表等。結合CSS樣式的設置，可以實現更多個性化的效果，為網頁圖片的展示增添更多美感和互動性。