纵向时间轴应优先采用语义化HTML结构（如包裹），结合Flex布局实现清晰对齐与响应式适配，辅以伪元素绘制竖线、绝对定位添加时间点圆点，并通过nth-child实现奇偶项内容交替排布以增强视觉节奏。
用 CSS 实现纵向时间轴，核心是利用 position（尤其是 relative + absolute）或现代布局（如 flex / grid）控制节点与线条的对齐关系。关键不在于“多炫酷”，而在于结构清晰、响应友好、语义合理。
结构先行：语义化 HTML 是基础
避免用 div 堆砌，推荐使用 包裹时间项，每项含时间点、内容块：
这样既利于 SEO 和可访问性，也方便后续用 CSS 精准控制每一项的位置与样式。
绝对定位法：精准控制节点与连线
给 .timeline 设 position: relative，再让每个 .timeline-item 使用 position: absolute 按 top 百分比或具体值垂直排列。时间点（）可绝对定位在左侧，内容块在右侧，中间加一条纵贯的伪元素竖线：
立即学习“前端免费学习笔记（深入）”；
.timeline { position: relative; padding-left: 80px; }.timeline::before { content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: #e0e0e0; }.timeline-item { position: relative; padding-left: 80px; margin-bottom: 40px; }.timeline-item time { position: absolute; left: 0; top: 0; width: 70px; text-align: right; }.timeline-content { margin-left: 80px; }
Flex 布局法：更简洁、更易维护
无需计算 top 值，用 column 方向 flex 排列所有项，再通过子项内部 flex 实现左右分区：
.timeline { display: flex; flex-direction: column; gap: 32px; padding-left: 60px; position: relative; }.timeline::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #ddd; }.timeline-item { display: flex; align-items: flex-start; gap: 16px; }.timeline-item time { flex: 0 0 70px; text-align: right; margin-right: 16px; }.timeline-content { flex: 1; }
这种方法天然支持响应式——小屏时可改为 row-reverse 或堆叠显示，只需媒体查询改 flex-direction 即可。
细节优化：让时间轴更专业
真正好用的时间轴，往往赢在细节：
- 时间点加小圆点：用
time::after { content: ''; position: absolute; left: 23px; top: 50%; transform: translateY(-50%) scale(1.2); width: 12px; height: 12px; border-radius: 50%; background: #4a90e2; } - 奇偶项内容左右交替（增强视觉节奏）：用
.timeline-item:nth-child(odd) .timeline-content { margin-left: 80px; } .timeline-item:nth-child(even) .timeline-content { margin-right: 80px; text-align: right; }，再配合方向微调 - 移动端适配：当屏幕宽度
