左右结构对不齐主因是box-sizing、padding、border或浮动残留，应优先用Flex/Grid布局；Flex通过align-items控制对齐，Grid用align-items/justify-items精确调控；务必全局设box-sizing:border-box并用开发者工具排查真实尺寸差异。
左右结构对不齐，大概率不是“没对齐”，而是 box-sizing、padding、border 或浮动残留导致的视觉错位。CSS Grid 和 Flexbox 能直接绕过传统浮动/定位陷阱，优先用它们。
用 display: flex 强制等高+自动对齐
左右两栏高度不一致、文字基线偏移、margin 折叠都会让“看起来没对齐”。Flex 默认 align-items: stretch，天然拉平高度；加上 align-items: flex-start 可统一顶部对齐。
body {
display: flex;
gap: 20px; /* 推荐替代 margin，更可控 */
}
<p>.left, .right {
flex: 1; /<em> 等宽，或用 flex: 0 0 300px 控制固定宽 </em>/
}</p><p>/<em> 避免子元素 margin 影响父容器高度 </em>/
.left > <em>, .right > </em> {
margin-top: 0;
margin-bottom: 0;
}-
gap比在子元素上写margin-right更可靠，不会触发外边距合并 - 如果右侧栏内容少，但高度被左侧撑高，加
align-items: flex-start可解除拉伸 - IE11 不支持
gap，需回退为margin+flex-shrink: 0防缩容
用 display: grid 精确控制列宽与对齐基准
当左右宽度不同（比如 250px + 1fr）、需要响应式断点或跨行对齐时，Grid 更稳。关键在 align-items 和 justify-items 控制单元格内内容对齐方式。
.container {
display: grid;
grid-template-columns: 250px 1fr; /* 左固定，右自适应 */
gap: 20px;
align-items: start; /* 整体内容顶部对齐 */
}
<p>.left {
justify-self: start; /<em> 左栏内容左对齐（默认） </em>/
}</p><p>.right {
justify-self: stretch; /<em> 右栏内容占满（默认） </em>/
}-
grid-template-columns中不要混用px和%，容易因四舍五入错位；统一用fr或minmax() - 若某栏内文本换行后底部不齐，加
align-self: start到该子元素，覆盖容器级align-items - Firefox 对
grid-gap兼容性好，但旧版 Safari 需用grid-column-gap单独写
排查真实错位原因：别只盯着 width
90% 的“对不齐”其实来自隐藏干扰项：默认 box-sizing: content-box 让 width: 50% + padding: 10px 实际超宽；font-size 不同导致行高差异；甚至 vertical-align: baseline 在 inline-block 下偷偷搞鬼。
立即学习“前端免费学习笔记（深入）”；
- 全局重置：
* { box-sizing: border-box; }必加，否则所有padding都会撑出容器 - 检查是否误用了
float: left且没清除，导致后续元素塌陷 —— 直接删掉float改用 Flex/Grid - 用浏览器开发者工具的“Layout”面板（Chrome/Firefox）悬停看每个盒子的真实尺寸和 margin/border/padding 分布
- 如果用了
line-height或vertical-align，在左右栏都显式设成相同值，比如line-height: 1.5; vertical-align: top;
真正难的不是写对代码，而是打开开发者工具，把鼠标停在那两个框上，看清楚到底是 padding 多了 2px，还是 font-size 差了 0.5px，又或者某个祖先元素悄悄加了 transform: scale(0.99) —— 这些细节比布局模型本身更常决定对齐成败。
