本文介绍在未知高度的 单元格内，利用 CSS Flexbox 实现“上对齐一行 + 下对齐一行”的布局方案，关键在于让表格结构（table/tr/td）继承 100% 高度以激活 flex 布局的纵向空间分配能力。 本文介绍在未知高度的 `` 单元格内，利用 CSS Flexbox 实现“上对齐一行 + 下对齐一行”的布局方案，关键在于让表格结构（`table`/`tr`/`td`）继承 100% 高度以激活 flex 布局的纵向空间分配能力。在响应式或内容驱动的表格布局中，常需在某个 内同时展示顶部提示信息和底部操作标签（如“编辑”“删除”），而单元格高度又完全由另一列（如长文本、多行内容）动态撑开——此时若直接对 内部容器使用 display: flex; flex-direction: column; justify-content: space-between，往往失效：因为默认情况下，、 和 的高度是“包裹内容”的，不会自动将剩余空间传递给子元素，导致 flex 容器无法感知可用高度，justify-content: space-between 失效。解决方案的核心是显式赋予表格结构高度继承能力：为 table、tr 和 td 同时设置 height: 100%。这并非强制固定高度，而是让它们“尽可能伸展以填满父容器高度”。当表格处于常规文档流中且无明确高度限制时，该声明会触发浏览器将可用垂直空间逐层向下传递，最终使 获得由对侧列内容撑起的实际高度，从而让其内部 flex 容器能正确计算并分配空间。以下是推荐实现方式（简洁高效，无需额外 wrapper ）： String top String bottom STARTEND /* 关键：启用高度继承链 */ table, tr, td { height: 100%; } td { border: 1px solid #999; vertical-align: top; /* 可选，确保内容对齐基准一致 */ } /* 直接在 td 上启用 flex 布局 */ .cell { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #007bff; /* 视觉标识，可移除 */ padding: 4px; /* 可选内边距 */ } .top, .bottom { margin: 0; /* 重置默认外边距 */ } .top { align-self: flex-start; } .bottom { align-self: flex-end; }✅ 优势说明： 无需嵌套 ，语义更简洁，DOM 更轻量； height: 100% 在无显式父高时，实际依赖于表格整体被内容撑开的高度，完全保持流式特性； 兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16）； 若需支持旧版 IE，可退化为 position: relative + position: absolute 方案，但本文聚焦标准现代方案。⚠️ 注意事项： 确保表格未被包裹在 overflow: hidden 或 max-height 限制的容器中，否则高度继承可能被截断； 若表格位于 Flex/Grid 容器中，请确认其父容器也允许高度自然扩展（例如 align-items: stretch）； 避免在 .cell 上同时设置 min-height 或 height，以免覆盖 100% 继承逻辑。通过这一模式，你可以在任意动态高度的表格单元格中，精准、可靠地实现顶部与底部双行内容的分离对齐，兼顾语义性、可维护性与渲染性能。