双飞翼布局改侧栏宽度时，必须同步更新三处：.left/.right的width、.inner的margin-left和margin-right；因留白与定位联动，任一遗漏会导致错位或遮盖。
双飞翼布局改侧栏宽度，必须同步更新三处地方
改左栏或右栏宽度时，不能只调 .left 或 .right 的 width，否则必然错位、重叠或内容被遮盖。核心在于：双飞翼的留白和拉回是联动计算的，所有值都绑定在同一个尺寸基准上。
-
.left和.right的width值（比如200px） -
.main .inner的margin-left（对应左栏）和margin-right（对应右栏），也得设成相同像素值 -
.left的margin-left: -100%不用改——它始终按父容器宽度算，作用是“拽回整行起点” -
.right的margin-left必须改成负的自身宽度（比如右栏宽220px，就得写margin-left: -220px），不是百分比
为什么 .right 不能用 margin-left: -100%
因为 .right 是在 .left 之后浮动的，它的定位基准不是父容器左边缘，而是前一个浮动元素（即 .left）的右边缘。用 -100% 会把它向左拉一整个父容器宽，直接叠到 .left 上面；而用 -220px 才能精准让它左边缘对齐到 .main 右侧预留空白的起点。
常见错误：把左右栏都写成 margin-left: -100% ——结果两翼挤在一起，中间内容被盖住。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
改宽度后内容被侧栏遮盖？检查 .inner 的 margin 是否匹配
遮盖问题几乎 100% 是因为 .main .inner 的 margin-left/margin-right 没跟着改。这个内边距不是装饰用的，它是给侧栏“腾位置”的唯一通道。
- 左栏宽
250px→.inner必须有margin-left: 250px - 右栏宽
180px→.inner必须有margin-right: 180px - 如果用了
padding替代margin（老方案），同样要同步改padding-left/padding-right
响应式下改宽度更危险：避免用百分比或 em 设侧栏宽
IE6–IE9 对 margin-left: -100% 的计算极不稳定，尤其当父容器宽度动态变化时。现代项目虽不用兼容老 IE，但若你在断点里用 width: 20% 给侧栏，.inner 的 margin 就没法用像素值匹配——这时双飞翼逻辑就崩了。
真要响应式，建议：
- 侧栏用固定 px 宽度（如 240px），靠媒体查询切换显隐
- 或直接换 display: grid，用 grid-template-columns: 240px 1fr 240px 一行搞定，无需负边距、无需嵌套 .inner
真正容易被忽略的，是 .inner 这层容器的存在意义——它不是为了“多一层 div”，而是把内容区域和布局留白彻底隔离。漏掉它，或者把 margin 加错层级，改再多次宽度也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
