卡片容器必须设 display: flex 且 flex-direction: column，否则 margin-top: auto 等垂直对齐失效；按钮需位于 flex-column 容器的直接子元素或其父容器上，同时卡片需设 min-height 并配合外层 align-items: stretch 或 grid-template-rows: 1fr 实现等高。
卡片容器必须设 display: flex 且 flex-direction: column
按钮“浮”在中间、随内容变高变低，90% 是因为卡片没启用垂直弹性布局。Flex 默认是 row，此时 margin-top: auto 或 align-self: flex-end 全部失效。
必须显式写：.card { display: flex; flex-direction: column; }。如果用了 .card-body 这类 wrapper，那 flex-direction: column 得加在它身上，而不是外层 .card。
用浏览器开发者工具检查 computed styles，确认 flex-direction 确实是 column —— 别被更高优先级的 CSS 覆盖掉。
按钮不是直接子元素？那就把 margin-top: auto 加到它的父容器上
常见结构是：<div class="card"><div class="card-content">
<h3>标题</h3>
<p>正文</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div class="card-actions"><button>操作</button></div>
</div></div>。这时 <button></button> 不是 .card 的直接子项，margin-top: auto 加在 button 上完全没用。
- 给
.card-actions加margin-top: auto（前提是它是.card-content的直接子元素） - 或者让
.card-content自身变成flex-column容器，并用justify-content: space-between，再把<h3>+</h3> <p></p>包进一个<div>，按钮单独作为最后一个子元素 <li>避免三层以上嵌套：每多一层 wrapper，就多一重对齐断裂风险</li> <h3>网格中卡片高度不一致？<code>min-height和align-items: stretch缺一不可单张卡片按钮到底了，但网格里还是高低错位——问题不在按钮，而在卡片本身高度不同。外层容器（比如
.row或display: grid）没强制等高。-
.card必须设min-height（别只靠height，会截断内容） - 外层如果是 Flex 布局，加
align-items: stretch；如果是 Grid，加grid-template-rows: 1fr - 若用 Bootstrap，
.row默认不是 stretch，得额外加align-items-stretch类 - 检查有没有
overflow: hidden或max-height暗中限制了卡片高度
按钮尺寸不统一？别硬设
width/height，用padding+box-sizing: border-box响应式下固定宽高容易溢出或错位，尤其小屏。更稳的方式是控制内边距和字体：
- 统一
padding: 12px 24px，比height: 40px更兼容不同行高 - 加
font-size: 1rem和line-height: 1.2，防按钮因文本换行撑高 - 务必写
box-sizing: border-box，否则border和padding会让按钮总尺寸失控 - 避免
white-space: nowrap，除非能 100% 确保按钮文字不超长
真正卡住对齐效果的，往往不是按钮本身，而是卡片容器的高度分配逻辑和嵌套层级。调试时先盯死
flex-direction和min-height，再看按钮是否在正确层级上触发margin-top: auto。其他样式都是锦上添花，这两点错了，后面全白搭。 -
