HTML과 CSS를 사용하여 반응형 사진 갤러리 레이아웃을 만드는 방법

<ul class="gallery">
  <li>
    <img src="image1.jpg" alt="Image 1">
    <h3>图片标题1</h3>
    <p>图片描述1</p>
  </li>
  <li>
    <img src="image2.jpg" alt="Image 2">
    <h3>图片标题2</h3>
    <p>图片描述2</p>
  </li>
  <!-- 更多图片 -->
</ul>

.gallery {
  width: 80%;
  margin: 0 auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.gallery h3,
.gallery p {
  text-align: center;
  margin: 10px 0;
}

@media (max-width: 600px) {
  .gallery li {
    width: 100%;
  }
}

@media (min-width: 601px) {
  .gallery li {
    width: 50%;
  }
}