双栏布局需按场景选技术：现代项目首选CSS Grid，IE11等旧环境用Flex并注意等高陷阱，表格型表单用table-layout: fixed，禁用绝对定位做双栏，语义与内容流优先。

双栏布局不是“选一种写法就行”，而是得先看清楚：你到底要解决什么问题——是简历排版、表单对齐、内容分栏，还是老系统兼容？不同场景下，grid、flex、table-layout: fixed 的适用性天差地别，强行套用只会卡在响应式失效、语义崩坏或 IE 下塌陷上。

用 grid 做语义清晰的双栏（现代项目首选）

这是目前最可控、最易维护的方式，尤其适合简历、个人主页、仪表盘等需要左右功能分区的页面。

• grid-template-columns: 30% 70% 直接定义比例，左侧放联系信息/技能，右侧放经历/项目
• 必须加 gap 控制间距，别依赖 margin —— grid 的 gap 是跨列统一计算的
• 小屏切单栏只用一条媒体查询：@media (max-width: 768px) { grid-template-columns: 1fr; }，不用改 HTML 结构
• 别给子元素设 width —— grid 列宽由容器控制，子项设 width 反而可能触发溢出或换行
• 如果右侧内容高度远大于左侧，又不想拉长整页，给右侧加 overflow-y: auto 即可滚动，不影响左侧布局流

用 flex 替代 grid 的前提和陷阱

只有当你必须支持 IE11 或某些定制化 CMS（不支持 CSS Grid）时，才考虑 flex。但它不是 grid 的平替，行为逻辑完全不同。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• display: flex 默认 align-items: stretch，会让两栏强制等高 —— 简历里左侧只有 3 行文字，右侧却撑出 2 米高，视觉突兀
• 必须显式写 align-items: flex-start，否则左右栏高度会互相绑架
• 列宽不能只靠 width: 30%，要用 flex: 0 0 30% —— 防止内容超长时被压缩变形
• 如果右侧是视频或 iframe，它可能默认带固有宽高比，需额外加 flex-shrink: 0 防止被 flex 压缩

table-layout: fixed 只用于表格内部列宽控制

别用

标签做整页双栏，那是语义错误；但如果你在写表单、配置项这类“左右标签+输入框”的两列表格，table-layout: fixed 是唯一能真正锁死列宽的方法。

• width="50%" 写在

上基本无效 —— 浏览器默认 table-layout: auto，完全按内容撑开

必须组合使用： +

必须紧贴 开始后、 前，顺序错就整个失效

一旦某行用了 colspan="2"，该行立刻脱离 fixed 布局逻辑，竖线大概率错位，此时只能手动加 border 或 JS 修正

绝对定位（position: absolute）不是双栏解法

有人把右侧视频区域设成 position: absolute; right: 0; top: 0; height: 100vh;，看似实现了“右半屏固定”，但后续所有内容都会叠在首页顶部——因为绝对定位脱离文档流，浏览器根本不知道它占了多大空间。

• 想让视频区域“视觉上在右边、逻辑上还在流里”，必须用 display: flex 或 display: grid 包裹左右两块，再给视频容器加 height: 100% 和 object-fit: cover
• 如果视频要全高且随滚动隐藏/显示，优先用 position: sticky 而非 absolute，它仍在文档流中
• 移动端慎用 vh 单位——Safari 在地址栏收起/展开时会重算 100vh，导致视频区域跳动

真正难的不是写对一行 grid-template-columns，而是判断当前需求是否真的需要双栏——比如纯文字新闻页，用 column-count: 2 做分栏阅读体验更好；而表单里的 label/input 对齐，用 display: grid 套一层 grid-template-columns: max-content 1fr 才是最稳的。布局选择，永远从语义和内容流出发，而不是从“看起来像不像双栏”出发。

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