产品卡片布局异常求助：第6张起卡片逐个向上偏移

核心问题：HTML结构错误 #

你的HTML代码中每个产品卡片都被单独包裹在一个.product-card-container容器里，而非所有卡片共享同一个外层flex容器。这种结构会让每个卡片成为独立的flex布局单元，当卡片数量增多时，这些独立容器会按块级元素堆叠，视觉上呈现出卡片向上偏移的异常。

修复步骤 #

1. 修正HTML结构 #

只保留一个最外层的.product-card-container，将所有.nft卡片作为它的直接子元素：

<div class="product-card-container">
  <div class="nft">
    <div class='main'>
      <img class='tokenImage' src="${productData.image}" alt="NFT" />
      <h2 class="name-prod">${productData.name}</h2>
      <div class='tokenInfo'>
        <div class="price">
          <p>${productData.price} руб</p>
        </div>
      </div>
      <div class="unit">
        <button class="less">-</button>
        <p class="unit-txt">${productData.quantity}</p>
        <button class="more">+</button>
      </div>
    </div>
  </div>
  <div class="nft">
    <div class='main'>
      <img class='tokenImage' src="${productData.image}" alt="NFT" />
      <h2 class="name-prod">${productData.name}</h2>
      <div class='tokenInfo'>
        <div class="price">
          <p>${productData.price} руб</p>
        </div>
      </div>
      <div class="unit">
        <button class="less">-</button>
        <p class="unit-txt">${productData.quantity}</p>
        <button class="more">+</button>
      </div>
    </div>
  </div>
  <!-- 后续所有.nft卡片都嵌套在此容器内 -->
</div>

2. 可选CSS优化 #

为避免卡片内容高度差异导致的对齐问题，给.product-card-container添加对齐属性：

.product-card-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-start; /* 确保换行后卡片顶部对齐 */
}

效果验证 #

修正后，所有卡片会在同一个flex容器内有序排列，超出一行宽度时自动换行，无论卡片数量多少都能保持整齐布局，不会再出现向上偏移的异常。

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