修复作品集网站相册第四行图片样式与交互不一致问题

嘿，我一眼就瞅出问题所在啦！你第四行的三张图片（第10、11、12张）没有像前三行那样用<div>容器包裹，直接放在了.gallery根容器下，这就导致它们完全没享受到你为行级容器写的样式和交互规则～

核心问题分析 #

你的CSS里，控制图片行高、hover缩放动画的关键规则（比如grid-template-rows、hover时的行高变化）都是绑定在.gallery>div这个选择器上的。而第四行的<article>元素直接属于.gallery，根本匹配不到这些规则，自然尺寸和交互都和前三行不一样。

快速修复步骤 #

只需要调整HTML结构，把第四行的三个<article>用一个<div>包起来，和前三行的结构保持一致就行：

修改后的相册HTML结构

<!-- Gallery Section -->
<p>
<section id="gallery">
  <div class="gallery">
    <!-- 第一行 -->
    <div>
      <article>
        <a href="#img1">
          <img src="images/landingpage.png">
        </a>
      </article>
      <article>
        <a href="#img2">
          <img src="images/apps.png">
        </a>
      </article>
      <article>
        <a href="#img3">
          <img src="images/bonniebook.png">
        </a>
      </article>
    </div>
    <!-- 第二行 -->
    <div>
      <article>
        <a href="#img4">
          <img src="images/appm.jpg">
        </a>
      </article>
      <article>
        <a href="#img5">
          <img src="images/liebe.jpeg">
        </a>
      </article>
      <article>
        <a href="#img6">
          <img src="images/appguide.jpg">
        </a>
      </article>
    </div>
    <!-- 第三行 -->
    <div>
      <article>
        <a href="#img7">
          <img src="images/uishop.jpg">
        </a>
      </article>
      <article>
        <a href="#img8">
          <img src="images/site3.png">
        </a>
      </article>
      <article>
        <a href="#img9">
          <img src="images/kiwi.jpg">
        </a>
      </article>
    </div>
    <!-- 第四行（新增包裹div） -->
    <div>
      <article>
        <a href="#img10">
          <img src="images/skolos.jpg">
        </a>
      </article>
      <article>
        <a href="#img11">
          <img src="images/lvwalk.jpg">
        </a>
      </article>
      <article>
        <a href="#img12">
          <img src="images/neonmuseum.jpg">
        </a>
      </article>
    </div>
  </div>
</section>

为什么这样能解决问题？ #

• 现在第四行的三个<article>和前三行一样，都属于.gallery>div容器，会自动继承你写的grid-template-rows、过渡动画以及hover时的行高变化规则。
• 你现有的CSS不需要做任何修改，因为.gallery>div:has(...)这些hover选择器会自动作用到新的行容器上，第四行的图片hover时也会和前三行有一样的放大效果。

额外小提醒 #

你代码里的.gallery重复写了两次display属性（先flex再grid），虽然浏览器会取最后一个grid生效，但建议删掉前面的display: flex;，避免不必要的代码冗余哦～

内容来源于stack exchange