用 display: flex + flex-wrap: wrap 实现三列价格卡片等宽底部对齐，卡片设 flex: 1 1 280px，内部用 flex-column + space-between；价格数字需大字号、高对比度并加 aria-label；“推荐”标签用绝对定位；响应式按内容密度在 720px/480px 断点调整。
怎么让三列价格卡片等宽且对齐底部
直接用 display: flex + flex-wrap: wrap 最稳，别碰 table——表格语义错、响应式难调、底部对齐要 hack。Flex 布局下每张卡片设 flex: 1 1 300px，既保证最小宽度，又允许等分剩余空间。
常见错误是只写 flex: 1，结果小屏幕下单张卡片被压扁；或者忘了加 align-items: stretch（默认值，但显式写上更安心），导致卡片高度不一致。
- 必须给容器加
display: flex和flex-wrap: wrap - 每张卡片加
flex: 1 1 280px（280px 是移动端最小舒适宽度） - 卡片内部用
display: flex; flex-direction: column;+justify-content: space-between拉开标题和按钮，实现底部对齐 - 避免在卡片里用
height: 100%，它依赖父容器明确高度，Flex 下反而失效
价格数字怎么突出又保持可访问性
别只靠颜色或字体大小。大号数字（如 font-size: 2.5rem）必须配合足够对比度的背景/文字色（至少 4.5:1），否则屏幕阅读器能读，但色弱用户看不见“贵”和“省”的差异。
常见错误是把价格包在 <span class="price"></span> 里只加样式，没加 aria-label。比如 ¥199 元/月，得写成 <span aria-label="每月一百九十九元">¥199</span>，不然语音朗读就只剩“¥199”，单位和周期全丢。
立即学习“前端免费学习笔记（深入）”；
- 价格数字用
font-weight: 700+line-height: 1防止行高撑开 - 单位（如“/月”）用
font-size: 0.6em+vertical-align: super上标，别用sup标签——语义不对，且默认有 margin - 促销价和原价并排时，原价加
text-decoration: line-through，别用灰色——灰色可能低于对比度标准
“推荐”标签怎么加才不破坏布局流
绝对定位（position: absolute）最干净。相对定位父容器加 position: relative，标签本身设 top: -12px + right: -12px，再配 transform: rotate(45deg)。这样不影响 Flex 主轴排列，也不会触发新层叠上下文导致遮挡。
常见错误是用 float 或 margin 推，结果换分辨率就偏移；或者忘了加 z-index: 2，被卡片阴影盖住。
- 标签容器必须设
position: absolute，且父卡片为position: relative - 尺寸用
width: 80px+height: 24px固定，避免内容变长撑开 - 文字居中用
display: flex; align-items: center; justify-content: center，别用line-height模拟 - 加
box-shadow: 0 2px 4px rgba(0,0,0,0.1)提升视觉层级，但别太重，否则像弹窗
响应式断点怎么设才真有用
别按设备尺寸（如 max-width: 768px）切，按内容密度切。当三列卡片并排时文字开始换行、按钮被挤窄，就是该切两列的信号——通常发生在容器宽度 720px 左右。再窄到 480px 就单列。
容易踩的坑是媒体查询里重复写整套样式，或者只改 flex-direction 不调 flex-basis，导致小屏下单张卡片还是试图占 300px 宽，溢出滚动。
- 主容器在
@media (max-width: 720px)下改flex-basis: calc(50% - 16px)（留 16px 间隙） - 在
@media (max-width: 480px)下改flex-basis: 100%，同时移除卡片的margin-bottom避免多余空隙 - 所有字体大小用
rem，根元素font-size在断点里微调（如从16px→14px），比全改px更可控 - 禁用
user-scalable=no—— 屏幕阅读器和缩放需求用户会骂你
最麻烦的是卡片内“立即购买”按钮的文字长度，中英文混排时很难等宽；实际项目里建议用 JS 测量后动态加 class 控制换行，纯 CSS 很难兼顾所有语言场景。
