怎么制作左右分栏HTML简历？侧边栏高效利用法-html教程-PHP中文网

真正高效且语义正确的HTML简历分栏做法是用display: flex或grid配合语义化标签，左侧放联系信息/技能等静态模块，右侧放教育/工作等线性内容，结构清晰、响应式可控、屏幕阅读器友好。

怎么制作左右分栏html简历？侧边栏高效利用法

HTML 简历做左右分栏，table 是错的起点，float 是过时的坑，真正高效且语义正确的做法是用 display: flex 或 display: grid 配合语义化标签 —— 左侧放联系信息/技能/证书等静态模块，右侧放教育/工作/项目等线性内容，结构清晰、响应式可控、屏幕阅读器友好。

为什么不能用 `table` 做简历分栏

简历里没有“行列数据”，强行用

划分区域会触发三重问题：

和

被读屏软件识别为“表格单元格”，把“邮箱”读成“邮箱列第1行”，完全破坏信息层级

加了 cellspacing、width 等属性后，CSS 媒体查询无法可靠覆盖，小屏下两栏直接堆叠错乱或溢出

后续想加动画、滚动固定、深色模式切换，table 的渲染模型天然不支持，只能推倒重写

`flex` 实现侧边栏 + 主内容的最小可行写法

这是新手最不容易翻车的方案，兼容 IE10+，代码少、逻辑直：

父容器必须设 display: flex，漏掉这句整个布局就失效
左侧区域（如联系方式）用 flex: 0 0 240px：不伸展、不收缩、宽固定，比只写 width: 240px 更稳
右侧区域（如工作经历）用 flex: 1，自动吃掉剩余空间；若怕窄屏下太挤，加 min-width: 300px
别在子元素上写 width: 100% 或 float: left，它们和 flex 冲突，会导致换行或空白

<div class="resume">
  <aside class="sidebar"><h2>联系方式</h2>
    <p>name@example.com</p>
  </aside><main class="content"><h2>工作经历</h2>
    <p>2022.06–至今 | 前端工程师</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/2249" title="超级简历WonderCV"><img
														src="https://img.php.cn/upload/ai_manual/000/000/000/175679998691134.png" alt="超级简历WonderCV" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2249" title="超级简历WonderCV" class="overflowclass">超级简历WonderCV</a>
													<p class="overflowclass">一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。</p>
												</div>
												<a rel="nofollow" href="/ai/2249" title="超级简历WonderCV" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </main>
</div>

.resume { display: flex; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }

侧边栏内容该放什么？不是所有信息都适合放左边

左侧空间有限，应只放高复用、低更新频率、非线性的信息块：

✅ 推荐：联系方式、技能熟练度表（需用真

）、语言能力、证书列表（含颁发时间）、GitHub/LinkedIn 链接
⚠️ 慎用：工作经历、项目描述、教育背景 —— 这些是纵向流式内容，放右边更符合阅读习惯和 DOM 顺序
❌ 禁止：大段自我介绍、长篇技术栈说明、嵌套多层  的“美化区块”，会撑开侧栏、破坏对齐、拖慢加载
特别注意：如果技能要用表格展示（比如“React | 熟练 | 3年”），那个 

 必须独立存在，带  和 ，仅用于该局部数据，不承担整页布局职责。响应式切换时最容易忽略的细节
小屏下左右变上下，不能只靠 display: none 隐藏一栏 —— 这会让 SEO 和键盘 Tab 流断裂：

正确做法是在媒体查询里改 flex-direction: column，DOM 顺序保持  在前、 在后，确保主内容仍优先被读取
断点别硬写 max-width: 768px，手机真实 viewport 多在 480px–600px，用 max-width: 600px 更准
竖排后，align-items 默认值可能从 stretch 变成 flex-start，导致两侧高度不对齐，可显式补一句 align-items: stretch


最后提醒：侧边栏滚动固定（position: sticky）看似高级，但若父容器没设 min-height: 100vh 或意外触发了层叠上下文（比如加了 transform），它就会失效——这种细节，比写对 flex 属性还容易漏。