双栏顶部对齐默认不生效，因Grid/Flex默认在交叉轴上拉伸或按baseline对齐；Grid需设align-items: start，Flex需align-items: flex-start，table-cell需vertical-align: top。
双栏顶部对齐为什么默认不生效
Grid 或 Flex 默认会让子项在交叉轴（通常是垂直方向）上拉伸或按 baseline 对齐，而不是视觉上的“顶部对齐”。比如 grid-template-columns: 30% 70% 后，左右两栏内容高度不同，左侧头像+姓名撑高了，右侧经历列表却很短——结果就是右侧内容被自动居中或 baseline 对齐，看起来“悬空”。
根本原因不是 CSS 写错了，而是没显式覆盖默认行为。
-
align-items: start是 Grid 容器的最简解法，它让所有直接子项顶部对齐 - Flex 容器则需
align-items: flex-start（注意不是start），否则会继承stretch - 如果用了
display: table-cell（老项目兼容场景），必须加vertical-align: top，否则默认是middle
label 和 input 在双栏表单里怎么顶部对齐
这不是双栏问题，而是行内元素基线错位的老坑。label 是文字，input 是替换元素，它们的 baseline 天然不在一条线上，Chrome/Firefox 下 label 总是高出 2–4px。
- 别用
margin-top硬调：缩放或字体变化后立刻失效 - 统一设
vertical-align: middle到label和input上，父容器line-height: normal - 更稳的做法是把每组
label + input包进一个display: flex容器，再加align-items: flex-start - 如果右侧要塞错误提示（如
.error），别让它成为 flex 直接子元素，否则gap会把它也算进去，挤窄输入框
响应式下双栏顶部对齐容易断掉的点
媒体查询切单栏时，align-items 的作用域会变——原本控制左右两栏，切单列后变成控制每个区块内部的子项。这时候如果子项本身是 flex/gird，嵌套对齐逻辑就容易打架。
- @media 里重置
align-items: stretch或flex-start，别依赖继承 - 打印 PDF 时，多数引擎不支持
gap和align-items，得降级为padding-top控制顶部间距 - 用
break-inside: avoid包住每栏内容，防止某段经历在分页时被切成两半，导致顶部对齐视觉断裂 - 如果右侧是图片，记得加
object-position: top配合object-fit: cover，否则图片默认居中裁剪，顶部内容可能被切掉
IE11 兼容场景下的顶部对齐替代方案
IE11 不支持 align-items: start，也不认 gap，但能跑 flex。这时候不能靠现代写法兜底。
- 用
flex: 0 0 30%+flex: 0 0 70%替代width，防止内容溢出时缩容 - 显式写
align-items: flex-start（IE11 只认这个全称） - 避免用
grid-area命名区域——IE11 完全忽略，且无 fallback 机制 - 如果左侧是导航菜单，右侧是正文，建议给左侧加
min-height: 100vh，否则右侧内容少时，左侧菜单会塌成一行高度，顶部对齐失去意义
实际最难的不是写出顶部对齐，而是当页面混用 Grid、Flex、table-cell、position: absolute 时，对齐锚点层层覆盖，最后谁生效得靠 DevTools 一层层点开 computed 样式才能看清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
