盒子相冊的css代碼

盒子相冊是一種美觀、實用的圖片展示方式。通過使用CSS代碼，您可以創建一個現代化的盒子相冊。以下是如何使用CSS創建盒子相冊的步驟。

/* 1. 引入CSS文件 *//* 2. 創建HTML結構 */Image 1
Description of Image 1
Image 2
Description of Image 2
Image 3
Description of Image 3/* 3. 添加CSS樣式 */
.box-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
max-width: 800px;
}
.box {
position: relative;
width: 30%;
margin-bottom: 25px;
}
.box img {
display: block;
width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
}
.caption h3 {
margin-top: 0;
}
.caption p {
margin-bottom: 0;
}