Flexbox Gallery 中只有底行可点击

Question

我正在尝试创建一个响应浏览器宽度的 Flexbox 画廊（即换行并自动创建行），您可以在其中单击图像以在其自己的页面上打开图像的完整尺寸版本。

我运行它时遇到一个问题，由于某种原因，链接仅在底行的图像上起作用（包括指针悬停）。

<div class="gallery-container">
            <a class="gallery-photo" href="1.png">
                <img src="1.png" alt="">
            </a>
            <a class="gallery-photo" href="2.png">
                <img src="2.png" alt="">
            </a>
            <a class="gallery-photo" href="3.png">
                <img src="3.png" alt="">
            </a>
            <a class="gallery-photo" href="4.png">
                <img src="4.png" alt="">
            </a>
            <a class="gallery-photo" href="5.png">
                <img src="5.png" alt="">
            </a>
            <a class="gallery-photo" href="6.png">
                <img src="6.png" alt="">
            </a>
            <a class="gallery-photo" href="7.png">
                <img src="7.png" alt="">
            </a>
</div>

.gallery-container {
    display: flex;
    max-width: 90vw;
    width: 750px;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.gallery-photo {
    padding: 5px;
    height: 200px;
}

Answer 1

您所包含的代码不会重现该问题。

.gallery-container {
  display: flex;
  max-width: 90vw;
  width: 750px;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1em;
}

.gallery-photo {
  height: 200px;
  cursor: pointer;
}

<div class="gallery-container">
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/100/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/110/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/120/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/130/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/140/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/150/200">
  </a>
  <a class="gallery-photo" href="https://picsum.photos">
    <img src="https://picsum.photos/160/200">
  </a>
</div>