HTML网页双栏自适应布局代码实例-html教程-PHP中文网

现代项目首选 flex 布局：父容器 display: flex，左栏 flex: 0 0 250px + box-sizing: border-box，右栏 flex: 1 + word-break: break-word；grid 更语义化但兼容性差；float 仅适用于老系统维护。

html网页双栏自适应布局代码实例

直接用 display: flex 就能搞定，不用算 calc()、不用清浮动、不依赖 HTML 顺序，现代项目首选。

flex 布局：左固定右自适应最简写法

核心就三行 CSS：父容器设 display: flex，左栏用 flex: 0 0 250px，右栏用 flex: 1。比只写 width: 250px 更安全，因为 flex: 0 0 250px 明确禁用了伸缩和收缩，避免 padding/border 撑宽或小屏下被压缩。

左栏必须加 box-sizing: border-box，否则边框和内边距会额外加宽
右栏若内容含长英文/数字（如 API key、base64），需加 word-break: break-word 防溢出
父容器别漏 overflow: hidden 或 min-height: 0，否则右栏内部 flex 子项可能撑不开高度

示例：

.container { display: flex; }
.sidebar { flex: 0 0 250px; box-sizing: border-box; }
.main { flex: 1; word-break: break-word; }

grid 布局：语义最干净，但有兼容硬伤

一行定义列宽：grid-template-columns: 250px 1fr。它不依赖子元素顺序，也不需要防收缩逻辑，但 IE 完全不支持，Edge ≤15 也不行。如果你的项目已放弃 IE，这是最直观的写法。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

千万别给子元素再设 width: 100%，会和 grid 轨道冲突，导致横向滚动或错位
加间隙统一用 gap: 1rem，不是 margin；后者破坏轨道计算，且 gap 在 flex 中不生效
左右栏默认等高（align-items: stretch），若右栏内容少，左栏会被拉长——加 align-items: start 可修正

示例：

.container { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }

float + margin：只该出现在老系统维护中

它能跑通 IE6，但现代项目里每用一次，后续改起来都得重写结构。左侧必须 float: left，右侧靠 margin-left 腾空间，且 HTML 中左栏必须写在右栏前面——这违背语义直觉，也增加可访问性风险。

右栏 margin-left 必须 ≥ 左栏总宽度（含 border + padding），否则文字会掉到左栏下方
清除浮动推荐伪元素法：.container::after { content: ""; display: table; clear: both; }，比 overflow: hidden 更可控（后者会裁剪 box-shadow 或 position: absolute 子元素）
响应式切单列时，整套 float 规则得全部推翻重写；而 flex 只需改 flex-direction: column