如何正确实现垂直滚动图片画廊？h2元素布局异常求助

核心问题分析 #

用<h2>作为图片容器存在两个关键问题：一是语义错误（h2是标题元素，不应作为图片承载容器），二是块级元素默认的流布局会导致堆叠，缺乏合理的间距控制逻辑。

解决方案步骤 #

1. 语义化重构DOM结构
   替换<h2>为语义更合适的<figure>容器，内部用<div>承载背景图，同时用<figcaption>存放标题，结构更清晰规范。

2. Flexbox实现垂直居中+均匀间距
   给画廊容器设置display: flex、flex-direction: column，配合align-items: center实现图片居中，用gap直接控制元素间距，再通过max-height和overflow-y: auto开启垂直滚动。

3. 悬停交互优化
   给图片容器设置overflow: hidden，悬停时用transform: scale()实现平滑放大效果；标题默认隐藏，通过绝对定位+过渡动画实现悬停滑入显示。

修改后的代码示例 #

HTML

<div id="gallery">
  <figure class="gallery-item">
    <div class="image-container" style="background-image: url('图片地址1')"></div>
    <figcaption class="item-title">图片标题1</figcaption>
  </figure>
  <figure class="gallery-item">
    <div class="image-container" style="background-image: url('图片地址2')"></div>
    <figcaption class="item-title">图片标题2</figcaption>
  </figure>
  <!-- 可添加更多图片项 -->
</div>

CSS

#gallery {
  max-height: 80vh; /* 按需设置滚动容器高度 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* 控制图片间的均匀间距 */
  padding: 1rem;
  margin: 0 auto;
  width: fit-content;
}

.gallery-item {
  position: relative;
  width: 300px; /* 按需设置图片宽度 */
  height: 200px; /* 按需设置图片高度 */
  overflow: hidden;
  border-radius: 8px; /* 可选：添加圆角效果 */
  cursor: pointer;
}

.image-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.gallery-item:hover .image-container {
  transform: scale(1.1); /* 悬停时的放大比例 */
}

.item-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  margin: 0;
}

.gallery-item:hover .item-title {
  transform: translateY(0);
}

关键修改说明 #

• 用<figure>+<figcaption>替代<h2>，符合HTML语义规范，避免原生标题元素的默认样式干扰布局。
• Flexbox布局直接解决了居中与间距问题，无需手动调整复杂的margin/padding。
• 标题通过绝对定位+translate实现滑入效果，比直接显示隐藏更流畅自然。
• 明确设置滚动容器的max-height和overflow-y: auto，确保内容超出时可正常垂直滚动。

内容的提问来源于stack exchange，提问作者SkiBoxing