HTML怎么制作双栏布局的简历-html教程-PHP中文网

最直接方式是用grid-template-columns: 30% 70%定义双栏，.resume { display: grid; gap: 2rem; }，小屏用@media (max-width: 768px) { grid-template-columns: 1fr; }切单栏，避免浮动、table或硬编码宽度，确保语义正确、响应式可靠且打印适配。

html怎么制作双栏布局的简历

用 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 会让两栏高度强制一致，而简历内容长度天然不均，视觉上反而突兀。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

解决办法是显式设置 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 做简历双栏布局

有人会想用

 快速分栏，但这是语义错误，且带来一堆实际问题：
屏幕阅读器会把简历读成“表格”，破坏信息层级（比如把“姓名”和“2023–2024”当成同一行的单元格）
打印时容易断页错乱，尤其当右侧内容很长、左侧很短时
无法用 CSS 独立控制左右栏的字体大小、行高、内边距——所有样式都得绕着

走

移动端适配几乎只能靠 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 打印结果。