左右交替时间线布局需通过DOM结构+定位+媒体查询实现，用:nth-child(odd/even)控制偏移和图标位置，禁用:nth-of-type；移动端退化为上下堆叠，图标用伪元素绘制，内容区设max-width而非固定宽。
左右交替的时间线布局，核心不是靠 CSS Grid 或 Flex 的“自动交替”，而是靠明确的 DOM 结构 + 定位控制 + 媒体查询微调。直接写 display: flex 并指望它自动左右换边，会掉进语义错乱和响应失效的坑里。
用 odd 和 even 伪类手动控制左右偏移
时间线本质是有序列表，每个条目（<li>）天然有顺序。利用 :nth-child(odd) 和 :nth-child(even) 分别设置不同侧边距和图标位置，是最稳定、兼容性最好（IE9+）的做法。
常见错误：用 :nth-of-type —— 如果中间插了 <div> 或注释，序号就乱了；必须用 <code>:nth-child。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<ul class="timeline"></ul>设置position: relative，作为所有条目的定位上下文 - 每个
<li>设为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） - 确保
<li>的min-height足够，避免文字挤在一起
时间点图标不要用图片，用伪元素 + content 更可控
很多教程用 <img alt="HTML怎么做时间线交替_html时间线左右交替布局实现【实战】" > 或背景图放圆点，结果缩放失真、颜色难改、无法响应式缩放。用 ::before 伪元素画圆，样式全由 CSS 控制。
示例片段：
.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 横屏看到内容被切掉一半，或者在大屏上文字拉得太开难以聚焦。
