最可靠的方式是用 grid-template-columns 显式声明列宽比例，如 30% 70%，避免浏览器猜测；需确保父容器有明确宽度，禁用 flex-shrink 并避免在表格中做布局。

用 grid-template-columns 直接定义内容区宽度最可靠

浏览器不会“猜”你想要的内容区占多少，必须显式声明列宽比例。CSS Grid 的 grid-template-columns 是目前最直白、最不易出错的方式：它把容器按数值切分，不依赖内容长度，也不受空白符或换行干扰。

• 写 grid-template-columns: 30% 70%，左侧栏就严格占 30%，右侧内容区就是 70%，无需额外设 width 或 flex-basis
• 百分比基于容器总宽计算，只要父容器有明确宽度（比如 width: 100% 或默认块级行为），结果就稳定
• 别写 grid-template-columns: 200px 1fr 然后指望内容区自适应——当屏幕窄于 200px + 最小内容宽时，1fr 会压缩到不可读，不如统一用百分比或 minmax()

flex 下内容区宽度容易被 flex-shrink 拉垮

Flexbox 默认开启收缩（flex-shrink: 1），这意味着哪怕你写了 flex: 0 0 70%，一旦容器空间不足，内容区仍可能被压缩，尤其在小屏或字体放大时。

• 必须写全三值：flex: 0 0 70%，其中第二个 0 是 flex-shrink: 0，关掉收缩
• 单独写 width: 70% 不够——它会被 flex-shrink 覆盖，除非同时加 flex-shrink: 0
• 如果内容区里有长单词或 URL，还得配 overflow-wrap: break-word，否则宽度声明形同虚设

响应式切换时内容区宽度别靠 max-width 硬控

很多人想让内容区在大屏下最多宽 800px，小屏下铺满，于是给内容区加 max-width: 800px; width: 100%。这会导致两个问题：一是 Grid/Flex 列宽声明失效，二是左右栏视觉失衡（比如左侧栏还按 30% 算，右侧却卡死在 800px）。

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

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

下载

• 正确做法是控制整个网格容器的宽度，而不是单个内容区：.resume { max-width: 1260px; margin: 0 auto; }
• 内容区继续用 grid-template-columns: 30% 70%，它会在 1260px 容器内按比例缩放
• 小屏用 @media (max-width: 768px) { .resume { grid-template-columns: 1fr; } } 切单栏，此时 max-width 自动退让，内容区自然撑满

表格里设内容区宽度？先确认你真需要

HTML 表格不是页面布局工具。如果你在

里强行划分“左栏个人信息 / 右栏工作经历”，语义错误、屏幕阅读器混乱、打印错位都会立刻出现。

• 真要用表格控制内部列宽（比如表单的 label/input 对齐），必须配齐三样：table-layout: fixed + width: 100% +

写

单独生效？不会。浏览器在 table-layout: auto 下直接忽略它

更简单的方法：别用 table 做双栏布局，改用 display: grid，两行代码解决，且可访问性、响应式、维护性全在线

内容区宽度不是孤立参数，它始终依附于布局上下文。Grid 列宽声明、Flex 收缩开关、容器级约束、语义层级——漏掉任一环，视觉就会偏移，而且往往在某个特定设备或字号下才暴露。

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