HTML编辑器不提供卡片布局功能，卡片布局需通过HTML结构（如<div class="card">）和CSS（推荐Grid：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))；gap: 1.5rem）实现。
HTML 编辑器本身不提供“卡片布局”功能，它只是写代码的工具。真正创建卡片式布局，靠的是你写的 HTML 结构 + CSS 样式。别指望编辑器自动画出卡片——它只负责让你把代码写对、看得清、保存好。
用什么 HTML 结构才叫“卡片”
卡片本质是一个语义清晰、可复用的容器块，不是靠编辑器按钮点出来的。
- 每张卡片用一个
<div class="card">包裹，内部按需放<img>、<h3>、<p>、<button> - 所有卡片统一放在一个父容器里，比如
<section class="card-grid">或<div class="card-container"> - 避免用
<table>或嵌套<div style="float:left">——这些在现代布局中已失效且难维护
CSS Grid 是目前最稳的卡片容器方案
别再手动算 33.333% 宽度或写一堆 @media 断点。用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 一行解决自适应列数。
-
280px是单卡最小宽度，小屏（如 iPhone SE）下自动变为单列，不会溢出 -
1fr表示剩余空间均分，大屏下自动铺满，无需改代码 - 必须配
gap: 1.5rem控制间距，比用margin可靠得多——它不合并、不溢出、不触发重排 - 旧版 Safari（gap 在 Flex 中生效，但 Grid 的
gap兼容性更好，更推荐
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
padding: 1rem;
}
卡片内部内容对齐容易崩？用 Flex 而不是 height 或 position
文字长短不一、图片高度不定，会导致标题上浮、按钮乱跳——这是卡片布局最常被忽略的断裂点。
- 给
.card设display: flex; flex-direction: column; height: 100%，这是前提 - 主体内容区域（如描述文字）加
flex-grow: 1，强制撑开剩余空间 - 底部按钮用
margin-top: auto，永远贴底，不随字数变化位移 - 禁用
height: 300px或position: absolute——前者让长文本溢出，后者破坏可访问性和响应式
.card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.card-body {
flex-grow: 1;
padding: 1rem;
}
.card-footer {
margin-top: auto;
padding: 0.75rem 1rem;
}
图片和文字超长时别硬截，要留退路
直接写 text-overflow: ellipsis 或 object-fit: cover 很危险，尤其在低版本浏览器或比例极端的图上。
立即学习“前端免费学习笔记（深入）”；
- 图片优先用
aspect-ratio: 4/3+object-fit: cover；不支持时 fallback 用padding-top: 75%+position: relative/absolute - 多行文字截断用
display: -webkit-box+-webkit-line-clamp: 2，比 JS 截字轻量、稳定 - 所有卡片设
max-width: 400px，防止在超宽屏下拉得太开失真 - 悬停动效只用
transform: translateY(-4px)+transition，禁用margin-top或top——前者触发重排，滚动会卡
