vertical-align: bottom 仅对 td、th 或 display: table-cell 元素生效，对 tr、table 无效；需配合 height/min-height 才可见效果，且只作用于行内级内容；推荐用 flex 布局替代，但需注意 ie11 兼容性及像素级差异。
vertical-align: bottom 只对 td 和 th 有效
直接给 <tr> 或 <code><table> 加 <code>vertical-align: bottom 不起作用，浏览器会忽略。这个属性只在表格单元格（td、th）或 display: table-cell 元素上生效。
常见错误是写成：<tr style="vertical-align: bottom">——这纯属浪费，别这么干。
<ul>
<li>正确做法：给每个需要靠下的单元格加样式，比如 <code><td style="vertical-align: bottom">内容</td>
.align-bottom { vertical-align: bottom; }，再在 <td class="align-bottom"> 上复用
<li>注意：如果单元格没设固定高度，又只有单行文字，靠下效果可能不明显——因为单元格本身没“空间”可对齐，得配合 <code>height 或 min-height 才看得清为什么有时候 vertical-align: bottom 看不出效果
不是代码错了，而是视觉条件没满足。垂直对齐是相对于单元格“内部可用空间”的，不是相对于整行或整个表格。
- 单元格高度由内容撑开时，
bottom和默认middle看起来一样——因为没多余空间可“靠下” - 解决办法：显式设置
height或min-height，比如height: 60px，再加vertical-align: bottom就立刻可见 - 如果单元格里嵌了
<div> 或其他块级元素，<code>vertical-align对它们无效——它只管行内级内容（文本、图片、inline-block 等）替代方案：flex 布局更可控，但要注意兼容性
如果你的项目支持现代浏览器（Chrome 29+、Firefox 20+、Safari 9+），把
td改成 flex 容器，能绕过vertical-align的限制：.flex-bottom { display: flex; align-items: flex-end; }- 优势：对任意子元素（包括
<div>、<code><p></p>）都生效，不依赖行内上下文 - 风险：IE11 不支持
display: flex在td上（会退化为 block，破坏表格结构），必须加降级方案 - 别忘了加
height或min-height，否则flex-end没参考基准
别碰
valign属性，它早就废了<td valign="bottom"> 这种写法虽然部分浏览器还能识别，但它属于 HTML4 废弃属性，W3C 已明确不推荐，且在 strict 文档类型下会被忽略。 <ul> <li>现代项目一律用 CSS 控制，避免混用旧属性导致样式不可预测</li> <li>尤其当团队协作或后续维护时，<code>valign会让审查和调试成本陡增 - 优势：对任意子元素（包括
- 工具链（如 ESLint、stylelint）通常也会报 warning，不值得为一行省事埋坑
vertical-align: bottom 是按单元格底部边缘对齐，而 flex 的 align-items: flex-end 是按容器内容盒底边对齐——两者在有 padding 或 border 时可能差 1–2px，真正在意像素级对齐时得实测。
