React TypeScript中实现卡片垂直排列的问题求助

你的卡片无法垂直排列的核心问题在于单个卡片的CSS设置不合理，以及没有给承载卡片的父容器设置正确的垂直布局规则。以下是具体修复步骤：

1. 修正单个卡片的CSS #

当前.Card-Project的width:180%会让卡片超出父容器范围，margin-left:250px会强制偏移卡片位置，这两个属性是导致排列混乱的主要原因。修改后的CSS：

.Card-Project {
  /* 设置合适的宽度，避免超出容器 */
  max-width: 800px;
  width: 100%;
  /* 统一margin，让卡片上下间距一致，水平居中 */
  margin: 20px auto;
  padding: 24px;
  background-color: hwb(0 97% 0%);
}

2. 给卡片父容器添加垂直布局 #

假设你是在一个父组件中循环渲染Project组件，需要给这个父容器添加布局样式，确保卡片垂直堆叠：

示例父组件代码（比如ProjectsList） #

import { Project } from './Project';
import { IProject } from './types';

export function ProjectsList({ projects }: { projects: IProject[] }) {
  return (
    <div className="projects-container">
      {projects.map((project, idx) => (
        <Project key={project.id || idx} project={project} />
      ))}
    </div>
  );
}

父容器的CSS #

.projects-container {
  /* 使用flex布局，默认就是垂直排列（column方向） */
  display: flex;
  flex-direction: column;
  /* 给容器设置最大宽度，避免卡片过宽 */
  max-width: 900px;
  margin: 0 auto;
  /* 可选：添加容器内边距 */
  padding: 20px 0;
}

3. 额外优化建议 #

• 尽量避免使用index作为key，如果你的IProject有唯一ID（比如id字段），改用project.id作为key，提升React渲染性能。
• 可以给卡片添加阴影增强视觉层次感：

  .Card-Project {
    /* ...其他样式 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
  }
  

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