最直接方式是用grid-template-columns: 30% 70%定义双栏，.resume { display: grid; gap: 2rem; }，小屏用@media (max-width: 768px) { grid-template-columns: 1fr; }切单栏，避免浮动、table或硬编码宽度，确保语义正确、响应式可靠且打印适配。
用 CSS Grid 实现双栏简历布局最直接
双栏简历常见于设计师、前端工程师等需要突出技能/项目与基础信息并列展示的场景。CSS Grid 是目前最简洁可控的方式，不需要浮动或复杂嵌套。
关键在于把页面划分为左右两列：左侧约 30% 宽度放个人信息、技能标签、教育背景；右侧 70% 放工作经历、项目描述等长内容。用 grid-template-columns 直接定义即可。
示例结构：
<div class="resume"> <aside class="sidebar">...</aside> <main class="content">...</main> </div>
对应样式：
立即学习“前端免费学习笔记（深入）”；
.resume {
display: grid;
grid-template-columns: 30% 70%;
gap: 2rem;
}
@media (max-width: 768px) {
.resume {
grid-template-columns: 1fr;
}
}
- 左侧
.sidebar不用设宽度，靠 Grid 列宽控制 - 加
@media查询确保小屏时自动切为单栏，避免横向滚动 - 别用
float或inline-block—— 容易因空白符错位，且响应式难维护
Flexbox 做双栏兼容老浏览器但需注意高度对齐
如果必须支持 IE11，可用 Flexbox 替代 Grid，但要注意：默认 align-items: stretch 会让两栏高度强制一致，而简历内容长度天然不均，视觉上反而突兀。
解决办法是显式设置 align-items: flex-start，让左右栏各自按内容撑高：
.resume {
display: flex;
gap: 2rem;
}
.sidebar { flex: 0 0 30%; }
.content { flex: 0 0 70%; }
.resume { align-items: flex-start; }
-
flex: 0 0 X%比单纯width更稳，防止内容溢出时缩容 - IE11 不支持
gap，得用margin模拟间距（如给.content加margin-left: 2rem） - 别忘了在
.sidebar里用display: flex; flex-direction: column;控制内部列表垂直堆叠
避免用 table 做简历双栏布局
有人会想用 <table> 快速分栏，但这是语义错误，且带来一堆实际问题：
<ul>
<li>屏幕阅读器会把简历读成“表格”，破坏信息层级（比如把“姓名”和“2023–2024”当成同一行的单元格）</li>
<li>打印时容易断页错乱，尤其当右侧内容很长、左侧很短时</li>
<li>无法用 CSS 独立控制左右栏的字体大小、行高、内边距——所有样式都得绕着 <code><td> 走
<li>移动端适配几乎只能靠 <code>display: block 强转，但会丢失原本的列关系，顺序混乱
导出 PDF 时双栏错位？检查 @page 和字体加载
用浏览器「打印为 PDF」时双栏挤在一起，大概率不是布局问题，而是两个细节没处理：
- PDF 导出默认忽略
gap和部分flex行为，建议在@media print中补一层margin回退 - 用了 Web 字体（如
font-family: 'Inter', sans-serif）但没等字体加载完就打印，浏览器会回退到系统字体，导致宽度计算偏差，左右栏错位 - 解决方案：加
@page { size: A4; margin: 0.5in; }统一纸张边界；用document.fonts.load()确保字体就绪再触发打印
真正麻烦的从来不是怎么分两栏，而是让两栏在不同设备、不同输出目标下保持信息可读、结构可信、视觉平衡。多测几个分辨率，重点看手机竖屏和 PDF 打印结果。
