React卡片布局问题：居中错位与左堆叠反向扩展需求

目标效果 #

当前实现效果 #

现存问题 #

• 底部卡片无法居中
• 顶部三张卡片重叠，手动设置偏移后无法完美居中
• 点击"Shift Group Forward"按钮时，左侧卡片无法实现反向堆叠增长的效果

修复方案及代码修改 #

修改后的React组件代码

import React, { useState } from "react";
import "./DisplayCards.css";

type DisplayCardsProps = {
  images: string[];
  group: number;
};

const DisplayCards: React.FC<DisplayCardsProps> = ({ images, group }) => {
  const [currentGroup, setCurrentGroup] = useState(0);
  const startIndex = currentGroup * group;

  const firstGroup = images.slice(0, startIndex);
  const secondGroup = images.slice(startIndex, startIndex + group);
  const thirdGroup = images.slice(startIndex + group);

  // 反转左侧分组，实现反向堆叠效果
  const reversedFirstGroup = [...firstGroup].reverse();

  return (
    <div className="card-container">
      <div className="main-cards">
        {secondGroup.map((name, index) => {
          const offset = index * 30;
          return (
            <img
              key={index}
              src={name}
              className="main-card"
              style={{
                // 计算偏移量确保整个卡片组居中，同时分散排列
                left: `calc(50% - ${(secondGroup.length - 1) * 15}px + ${offset}px)`,
              }}
            />
          );
        })}
      </div>

      <div className="button-group">
        <button
          onClick={() =>
            setCurrentGroup((prevGroup) =>
              thirdGroup.length !== 0 ? prevGroup + 1 : prevGroup
            )
          }
        >
          Shift Group Forward
        </button>
        <button
          onClick={() =>
            setCurrentGroup((prevGroup) =>
              firstGroup.length !== 0 ? prevGroup - 1 : prevGroup
            )
          }
        >
          Shift Group Backward
        </button>
      </div>

      <div className="grid-container">
        <div className="card-stack first-group">
          {reversedFirstGroup.map((name, index) => {
            return (
              <img
                key={index}
                src={name}
                className="stack-card"
                style={{
                  left: `${index * 10}px`,
                }}
              />
            );
          })}
        </div>

        <div className="card-stack third-group">
          {thirdGroup.map((name, index) => {
            return (
              <img
                key={index}
                src={name}
                className="stack-card"
                style={{
                  left: `${index * 10}px`,
                }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default DisplayCards;

修改后的CSS代码

.card-container {
  position: relative;
  padding-bottom: 250px; /* 为底部卡片预留空间 */
}

.main-cards {
  position: relative;
  height: 219px; /* 固定高度避免容器塌陷 */
  width: 100%;
}

.main-card {
  position: absolute;
  width: 157px;
  height: 219px;
  top: 0;
}

.button-group {
  margin: 20px 0;
  text-align: center;
}

.button-group button {
  margin: 0 10px;
  padding: 8px 16px;
}

.grid-container {
  display: flex;
  justify-content: center;
  gap: 300px; /* 控制左右两组卡片的间距 */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.card-stack {
  position: relative;
  width: 157px;
  height: 219px;
}

.stack-card {
  position: absolute;
  width: 157px;
  height: 219px;
  top: 0;
}

问题对应修复说明 #

1. 底部卡片居中：

   • 将grid-container设置为绝对定位并固定在容器底部，通过left:0; right:0;和justify-content:center实现整体居中
   • 使用gap属性替代硬编码的margin，灵活控制左右卡片组的间距
   • 每个卡片组设置相对定位，确保内部绝对定位的卡片基于父容器正确排列

2. 顶部卡片分散且居中：

   • 给main-cards设置相对定位和固定高度，避免容器塌陷
   • 通过calc动态计算每张卡片的left值：先让整个卡片组居中，再依次添加偏移量，实现分散排列的同时保持整体居中

3. 左侧卡片反向堆叠：

   • 反转左侧分组的数组顺序，倒序渲染卡片
   • 反转后卡片的偏移量从0开始递增，新加入的卡片会处于堆叠的最下层，实现目标的反向增长效果

内容的提问来源于stack exchange，提问作者Hashem A. Damrah