左右交替时间线布局需通过DOM结构+定位+媒体查询实现，用:nth-child(odd/even)控制偏移和图标位置，禁用:nth-of-type；移动端退化为上下堆叠，图标用伪元素绘制，内容区设max-width而非固定宽。

左右交替的时间线布局，核心不是靠 CSS Grid 或 Flex 的“自动交替”，而是靠明确的 DOM 结构 + 定位控制 + 媒体查询微调。直接写 display: flex 并指望它自动左右换边，会掉进语义错乱和响应失效的坑里。

用 odd 和 even 伪类手动控制左右偏移

时间线本质是有序列表，每个条目（

）天然有顺序。利用 :nth-child(odd) 和 :nth-child(even) 分别设置不同侧边距和图标位置，是最稳定、兼容性最好（IE9+）的做法。

常见错误：用 :nth-of-type —— 如果中间插了

或注释，序号就乱了；必须用 :nth-child。

实操建议：

• 给
  设置 position: relative，作为所有条目的定位上下文
• 每个
• 设为 position: relative，并统一加左侧竖线（border-left）
• .timeline li:nth-child(odd) 向右偏移：设 left: 60px，时间点图标放右侧（right: -24px）
• .timeline li:nth-child(even) 向左偏移：设 left: -60px，时间点图标放左侧（left: -24px）

避免绝对定位导致的响应式断裂

纯靠 position: absolute 把每项硬塞到左右，会在小屏下完全重叠或溢出。真正健壮的交替布局，要让“左右”在移动端退化为“上下堆叠”，而不是强行维持错位。

关键点在于媒体查询中重置偏移逻辑：

• 在 @media (max-width: 768px) 内，清空所有 left/right 偏移，还原为默认文档流
• 把竖线从 border-left 改成 border-top，时间点图标统一居中（text-align: center）
• 确保
• 的 min-height 足够，避免文字挤在一起

时间点图标不要用图片，用伪元素 + content 更可控

很多教程用 或背景图放圆点，结果缩放失真、颜色难改、无法响应式缩放。用 ::before 伪元素画圆，样式全由 CSS 控制。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

示例片段：

.timeline li::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  top: 8px;
}
.timeline li:nth-child(odd)::before {
  right: -24px;
}
.timeline li:nth-child(even)::before {
  left: -24px;
}

注意：top: 8px 是为了让圆点垂直居中于文字行高，不是固定值——如果行高变了，这个值也要同步调。

内容区宽度不写死，用 max-width 配合 margin 自适应

左右交替最常被忽略的细节：内容区域太宽，导致一侧文字贴边、阅读困难。不能写 width: 40% 这种固定比例。

正确做法：

• 左右两侧内容区都设 max-width: 360px（适合阅读的舒适宽度）
• 用 margin-left 或 margin-right 推开，而非 width 占满
• 在移动端，统一设 margin: 0 auto 居中，max-width: 100%

否则你会在 iPad 横屏看到内容被切掉一半，或者在大屏上文字拉得太开难以聚焦。

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