float实现右固定左自适应最稳妥，需右元素前置并右浮动，左元素后置且overflow:hidden触发bfc；flex推荐现代项目，父容器display:flex，右设width和flex-shrink:0，左设flex:1；grid最直观但ie不支持。

用 float 实现右固定左自适应（兼容老浏览器）

IE8+ 仍需支持时，float 是最稳妥的方案。关键不是“左浮动右浮动”，而是让固定宽的右侧先写、右浮动，左侧后写、不设宽、用 overflow: hidden 触发 BFC 自动撑开剩余空间。

• HTML 顺序必须是：<div class="right"></div> <div class="left"></div>（右在前，左在后）
• .right { width: 200px; float: right; }
• .left { overflow: hidden; } —— 这行比设 float: left 更可靠，避免父容器塌陷且兼容性更好
• 如果左侧内容里有 float 元素，记得在它末尾清浮，否则可能影响布局

flex 布局实现右固定左自适应（现代推荐）

主流项目首选 display: flex，语义清晰、代码简洁、响应式友好。核心是让左侧用 flex: 1 占满剩余空间，右侧设固定宽即可。

• 父容器加：display: flex;
• .right { width: 200px; flex-shrink: 0; } —— flex-shrink: 0 防止被压缩（尤其在窄屏下）
• .left { flex: 1; } —— 等价于 flex: 1 1 0%，自动分配剩余宽度
• 注意：若右侧内容超长且未设 overflow，可能撑破容器；建议加 overflow: hidden 或 text-overflow: ellipsis

用 grid 实现右固定左自适应（最直观但兼容性需确认）

当目标浏览器支持 display: grid（Chrome 57+/Firefox 52+/Edge 16+），这是逻辑最直白的方式：明确定义两列轨道，右侧设固定值，左侧用 1fr。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器：display: grid; grid-template-columns: 1fr 200px;
• 无需调整子元素顺序，HTML 按自然流写就行（左元素在前，右元素在后）
• 如果右侧需要靠右对齐（比如留出右边距），可用 grid-template-columns: 1fr max-content; + justify-items: end;
• IE 完全不支持，如需兼容 IE，别用这个方案

为什么不用 position: absolute？

常见误区是给右侧加 position: absolute; right: 0; width: 200px;，左侧用 margin-right 撑开。这看似简单，但实际问题很多：

• 绝对定位元素脱离文档流，父容器高度无法被右侧内容撑开，容易导致内容重叠或截断
• 响应式场景下，right: 0 在小屏可能把右侧内容挤出视口，且 margin-right 难以动态匹配
• 如果左侧有滚动容器（如 height: 300px; overflow-y: auto），绝对定位右侧会盖住滚动条
• 可访问性和 SEO 友好度下降——DOM 顺序与视觉顺序不一致

除非是悬浮工具栏这类明确不需要参与文档流的场景，否则别为两列布局选 absolute。

真正麻烦的不是写法本身，而是没想清楚「右侧固定」是否真的指“宽度固定”——有时业务需求其实是“内容定宽、但允许最小宽度收缩”，这时 min-width 和 max-width 的组合比死守 width: 200px 更实用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！