全响应式可折叠图片组件布局异常问题排查

我做了一个图片墙，点击图片后对应的折叠div（.info类）会在图片所在行下方展开，已经实现响应式（屏幕缩小时自动调整行数，折叠区始终在对应行下方），但现在需要让.info跨整个container宽度显示。
目前.info会随点击图片的位置左右偏移，期望效果：

• 同一行点击不同图片时，.info位置不变，仅切换内容
• 点击下一行图片时，上一行的.info关闭，新的.info在该行下方跨容器宽度展开

核心思路是把.info从单个图片容器中剥离，按行分组管理，结合CSS布局确保.info填满容器宽度，同时通过JS控制内容切换与行级别的状态重置。

修改后的完整代码 #

HTML 结构调整 #

用.row-wrapper包裹每行图片和对应的所有.info，确保响应式换行时.info始终跟随所在行：

<div class="container">
  <!-- 第一行 -->
  <div class="row-wrapper">
    <div class="partner" onclick="toggleInfo(this, 'info1')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 1">
        <div class="gradient">
          <span class="name">Partner 1</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info2')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 2">
        <div class="gradient">
          <span class="name">Partner 2</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info3')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 3">
        <div class="gradient">
          <span class="name">Partner 3</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info4')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 4">
        <div class="gradient">
          <span class="name">Partner 4</span>
        </div>
      </div>
    </div>
    <!-- 该行专属的info容器 -->
    <div class="row-info">
      <div id="info1" class="info">
        <p>More information about Partner 1...</p>
      </div>
      <div id="info2" class="info">
        <p>More information about Partner 2...</p>
      </div>
      <div id="info3" class="info">
        <p>More information about Partner 3...</p>
      </div>
      <div id="info4" class="info">
        <p>More information about Partner 4...</p>
      </div>
    </div>
  </div>

  <!-- 第二行 -->
  <div class="row-wrapper">
    <div class="partner" onclick="toggleInfo(this, 'info5')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 5">
        <div class="gradient">
          <span class="name">Partner 5</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info6')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 6">
        <div class="gradient">
          <span class="name">Partner 6</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info7')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 7">
        <div class="gradient">
          <span class="name">Partner 7</span>
        </div>
      </div>
    </div>
    <div class="partner" onclick="toggleInfo(this, 'info8')">
      <div class="image-wrapper">
        <img src="https://via.placeholder.com/200x300" alt="Partner 8">
        <div class="gradient">
          <span class="name">Partner 8</span>
        </div>
      </div>
    </div>
    <!-- 该行专属的info容器 -->
    <div class="row-info">
      <div id="info5" class="info">
        <p>More information about Partner 5...</p>
      </div>
      <div id="info6" class="info">
        <p>More information about Partner 6...</p>
      </div>
      <div id="info7" class="info">
        <p>More information about Partner 7...</p>
      </div>
      <div id="info8" class="info">
        <p>More information about Partner 8...</p>
      </div>
    </div>
  </div>
</div>

CSS 样式优化 #

调整布局层级，确保.info填满容器宽度，同时保留响应式特性：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.partner {
  width: calc(25% - 5px);
  cursor: pointer;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  color: white;
  font-size: 1.5rem;
  z-index: 1;
}

.row-info {
  width: 100%;
  margin-top: 10px;
}

.info {
  display: none;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  animation: slideDown 0.3s ease;
}

.partner.active .image-wrapper img {
  opacity: 1;
}

.partner:not(.active) .image-wrapper img {
  opacity: 0.5;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

/* 响应式适配 */
@media (max-width: 800px) {
  .partner {
    width: calc(50% - 5px);
  }
}

@media (max-width: 500px) {
  .partner {
    width: 100%;
  }
}

JS 逻辑更新 #

实现全局状态重置+目标内容显示，确保行级别的切换逻辑：

function toggleInfo(element, infoId) {
  // 重置所有图片的激活状态和所有info的显示状态
  document.querySelectorAll('.partner').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.info').forEach(i => i.style.display = 'none');
  
  // 激活当前图片并显示对应info
  element.classList.add('active');
  document.getElementById(infoId).style.display = 'block';
}

效果验证 #

1. 任意图片点击后，对应.info在该行下方展开，宽度填满整个container
2. 同一行切换图片时，.info位置固定，仅内容切换
3. 切换到其他行图片时，上一行.info自动关闭，新内容在对应行下方展开
4. 屏幕缩放时，行数自动调整，.info始终跟随所在行并保持容器宽度

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