如何用CSS構建照片墻

照片墻是展示圖片的有效方式，特別是在網(wǎng)頁設計中，通過CSS，我們可以輕松地創(chuàng)建一個具有吸引力的照片墻。

1. HTML結構

我們需要在HTML中創(chuàng)建一個包含圖片元素的容器，我們可以使用div元素來創(chuàng)建這個容器，并在其中添加img元素來插入圖片。

<div class="photo-wall">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多圖片 -->
</div>

2. CSS樣式

我們需要使用CSS來定義照片墻的樣式，我們可以設置容器的寬度和高度，以及圖片的尺寸和間距。

.photo-wall {
    width: 300px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.photo-wall img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 5px;
}

在上面的CSS代碼中，我們使用了display: flex來創(chuàng)建一個靈活的布局，flex-wrap: wrap來允許圖片在容器內(nèi)換行，justify-content: space-between來平均分布圖片之間的間距，align-items: center來垂直居中圖片，我們還使用了object-fit: cover來確保圖片始終保持其寬高比，并且填充整個容器，我們設置了margin: 5px來添加一些間距，使照片墻看起來更加舒適。