17370845950

Foundation卡片需用grid-x+cell实现响应式布局并加grid-margin-x，或用flex-container.align-stretch统一高度；须规范内部图片、标题、文本样式，并禁用float等旧类。

Foundation 的卡片组件（.card）默认是块级、等宽堆叠的，若直接放在非容器或未配合响应式网格使用，容易出现高度不一致、换行错位、间距不均等问题。核心原因在于卡片内容长度不同导致高度差异，而 Foundation 默认未对齐高度或统一列宽。

用 grid-x + cell 包裹卡片，控制列数与断点

Foundation 的栅格系统（v6+）需用 grid-x 作为行容器，每个卡片放在 cell 内，并指定宽度类（如 small-12 medium-6 large-4），才能响应式均分且避免浮动错乱：

  
    ...
  
  
    ...
  
  
    ...
  

注意：必须加 grid-margin-x（横向间距）或 grid-padding-x，否则卡片会紧贴边缘；cell 不可省略，仅用 card 无法参与栅格计算。

用 flex-container 统一卡片高度与对齐

当需要所有卡片高度一致（如并排展示时底部对齐），可在卡片外层加 flex-container，并设 align-center 或 align-stretch：

  ...
  ...
  ...

关键点：

• align-stretch 让卡片自动拉伸到容器最高项的高度
• 避免在 card 内部再用 flex-container 冲突布局流
• 搭配 flex-dir-row 可实现水平排列（替代栅格），但需手动处理响应式断行（如配合 show-for-medium 类）

补足卡片内部结构一致性

即使外部布局正确，卡片内标题、图片、文本高度不一也会造成视觉不齐。建议：

• 为卡片头图（.card-section img）设固定宽高比或 object-fit: cover
• 限制标题行数：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（单行）或用 -webkit-line-clamp（多行截断）
• 给 .card-section 设最小高度（如 min-height: 120px），避免文字少的卡片过矮
• 移除卡片默认的 margin-bottom，改用栅格的 grid-margin-x/y 控制整体间距

慎用 float 或旧版 row/column 类

Foundation v6+ 已弃用 row / column 等浮动类。若混用 float-left 或手动写 float CSS，会导致 grid-x 计算失效、换行异常、父容器塌陷。务必统一使用 grid-x + cell 或 flex-container 布局体系。