纯css实现左右交错时间轴：用nth-child(even/odd)配合transform或margin控制偏移，伪元素绘制主线与圆点，移动端需媒体查询切单列，高度不均时需flex gap或js撑高。
直接用 nth-child 配合 transform 或 margin 就能实现左右交错，不需要 JS，也不必嵌套多层 div。关键在控制内容块的水平偏移和对齐方向，同时保持时间线视觉连贯。
用 nth-child(even/odd) 控制左右偏移
这是最常用也最可控的方式：偶数项靠右、奇数项靠左（或反过来），通过 margin-left/margin-right 或 transform: translateX() 实现错位。
- 使用
margin更直观，但可能影响父容器流式布局；transform不触发回流，适合动画或频繁重排场景 - 注意给所有
.timeline-item设置统一的position: relative，方便后续伪元素定位 - 若内容高度差异大，建议搭配
min-height或flex内部对齐，避免圆点错位
主线与圆点必须用伪元素独立绘制
时间轴的垂直主线和每个节点上的圆点，必须用 ::before 或 ::after 生成，不能依赖实际 DOM 元素——否则交错时主线会断开、圆点无法居中。
-
.timeline::before画贯穿整条的主线，用position: absolute+left: 50%+transform: translateX(-50%)居中 -
.timeline-item::before画圆点，同样用absolute定位到主线位置，top: 50%+transform: translate(-50%, -50%)精准居中 - 避免给圆点设
border-radius: 50%同时又用width/height不等值，会导致椭圆
移动端必须用媒体查询强制单列
左右交错在小屏上根本不可读，强行保留会挤压内容、遮挡文字，必须用 @media (max-width: 768px) 切换为全左对齐 + 主线左置。
- 不要只改
margin，同步调整.timeline::before的left值（比如从50%改成20px） - 圆点的
left也要对应调整，否则会悬空在内容外侧 - 可加
padding-left: 40px给内容留出空间，比用负边距更安全
最容易被忽略的是：当某一项内容高度远超其他项时，下一项的圆点仍会按固定间距渲染，导致视觉脱节。解决方法不是调 line-height，而是让主线高度由 JS 动态撑开，或改用 flex-direction: column 配合 gap 控制间距——但那就超出纯 CSS 范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
