HTML实现经典两栏宽度自适应布局的几种常用方法-html教程-PHP中文网

现代项目应优先使用flex或grid替代float和absolute，因后者易引发维护难题；flex适合一维布局如左固定右自适应，grid适合二维结构如三栏布局，二者语义清晰、响应式友好且兼容性良好。

html实现经典两栏宽度自适应布局的几种常用方法

现代项目直接用 display: flex 或 display: grid，别碰 float 和 position: absolute——它们不是“还能用”，而是“改起来会骂人”。

flex 实现左固定右自适应最稳妥

这是当前最通用、最可控的写法，IE10+ 全支持，代码少、逻辑直。

父容器必须设 display: flex，别漏掉；默认 flex-direction: row，不用额外写
左栏用 flex: 0 0 250px（不伸缩、不收缩、基础宽 250px），比只写 width: 250px 更安全，能防内容挤压变形
右栏用 flex: 1，它会自动占满剩余空间；若需最小宽度保护，加 min-width: 300px
常见错误：右栏内容含长英文/数字无空格时溢出，此时在右栏加 word-break: break-word 或 overflow-wrap: break-word
注意高度对齐：左栏默认不会随右栏拉高，要等高就得确认父容器 align-items: stretch 没被其他样式覆盖（它是默认值，但某些重置 CSS 会干掉）

grid 实现语义最清晰、维护成本最低

当你明确知道是“两列结构”，且不需兼容 IE，grid 是最干净的——一行定义列宽，不依赖子项顺序或伸缩逻辑。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

父容器设 display: grid + grid-template-columns: 250px 1fr，1fr 表示“剩余空间的 1 份”，不是百分比
不要给子元素再设 width: 100%，grid 子项默认不继承父容器 width，双重要求会导致错位
加间隙用 gap: 1rem，别用 margin 挤子元素，否则破坏轨道计算
IE 完全不支持 grid，Edge ≤15 也不行；若需兼容，得降级为 flex 方案
小屏适配时，grid-template-columns: minmax(250px, 1fr) 1fr 可让左栏保最小宽、右栏弹性分配，但注意小屏下可能撑不开一列

calc() 看似灵活，实则脆弱易断

calc() 能跑通，但只做一次静态计算，不响应 DOM 变化或折叠/展开状态，稍一嵌套就失效。

+ 和 - 两侧必须有空格：calc(100% - 200px) ✅，calc(100%-200px) ❌
* 和 / 左右禁止空格：calc(100vw / 375 * 16) ✅，中间多空格可能在旧 Chrome 或 Safari 中失败
嵌套容器中 100% 始终相对于当前元素的包含块，而 padding、border、transform 或 position: absolute 都会打断它
若必须用 calc()（如兼容 IE11），把动态部分抽成 CSS 变量：width: calc(100% - var(--sidebar-width))，JS 控制折叠时只改这个变量
纯 calc() 无法自动适应兄弟元素宽度变化；真正“自适应”还得靠 flex: 1 或 grid-template-columns

float 和 absolute 是技术债预警信号

看到 float: left 或 position: absolute，基本等于维护成本飙升——不是不能用，而是改起来会骂人。

float 方案需手动清除浮动（伪元素法更可控），且右栏 margin-left 必须 ≥ 左栏总宽度（含 border + padding）
absolute 让元素脱离文档流，导致可访问性差、高度塌陷、响应式难适配，且无法参与 flex/grid 布局流
所有方案里，左栏都不会自动随右栏拉高——这不是 bug，是 CSS 默认行为；只有 flex 和 grid 的 align-items: stretch 才能触发等高
三栏布局（左右固定、中间自适应）优先用 grid-template-columns: 200px 1fr 200px，比 calc(100% - 400px) 更健壮、更易维护