响应式Timeline应采用语义化HTML结构（ul.timeline > li.timeline-item > time + .timeline-content），用CSS Grid实现横竖布局切换，移动端竖排、桌面端双列，主轴线用伪元素统一绘制并媒体查询隐藏，内容展开用max-height过渡防重排。
Timeline时间线的HTML结构怎么搭才利于CSS控制
响应式Timeline最怕用绝对定位硬排节点，一换屏幕就错位。核心是让每个时间点（.timeline-item）天然流式堆叠，靠CSS Grid或Flex控制横纵布局切换。移动端默认竖排，桌面端改用双列网格：左侧放时间标签，右侧放内容；关键在于不写死宽度，用minmax(0, 1fr)防文字撑破容器。
推荐结构：<ul class="timeline"><li class="timeline-item"><time>2023-06</time><div class="timeline-content">...</div></li></ul>。不用<section>或<div>套多层，避免嵌套后flex/gird行为不可控。
用CSS Grid实现横竖自动切换的关键断点写法
别在@media里重复写整套grid模板，容易漏掉对齐属性。统一用display: grid，只改grid-template-columns和grid-column：
`.timeline {
display: grid;
grid-template-columns: 1fr;
}
.timeline-item {
display: contents; /* 让time和.content直接受grid控制 */
}
.timeline-item time {
grid-column: 1;
}
.timeline-item .timeline-content {
grid-column: 1;
}
@media (min-width: 768px) {
.timeline {
grid-template-columns: 120px 1fr; /* 左侧时间栏固定宽，右侧自适应 */
gap: 1rem;
}
.timeline-item time {
grid-column: 1;
grid-row: auto;
}
.timeline-item .timeline-content {
grid-column: 2;
}
}`注意两点：display: contents能让<li>不参与布局，避免多一层grid嵌套；gap必须设在.timeline上，而不是.timeline-item，否则移动端也会出现横向间隙。
立即学习“前端免费学习笔记（深入）”；
时间轴竖线（vertical line）怎么用伪元素画且不破坏响应性
用::before在.timeline上画主轴线最稳，不是每个.timeline-item都画一条——那样在移动端会变成一堆重叠的短线。
- 主轴线高度靠
height: 100%+min-height: 100vh撑开，防止内容少时线条截断 - 移动端隐藏主轴线，改用
.timeline-item::after画短横线连接上下项（仅在:not(:last-child)生效） - 绝对定位的轴线要加
transform: translateX(-50%)居中，但left: 0时得配合margin-left: calc(50% - 1px)防1px偏移（尤其Safari）
示例主轴线代码：
`.timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: #ccc;
transform: translateX(-50%);
}
@media (max-width: 767px) {
.timeline::before { display: none; }
.timeline-item:not(:last-child)::after {
content: "";
display: block;
width: 2px;
height: 1rem;
background: #ccc;
margin: 1rem auto;
}
}`
移动端点击展开/收起内容时CSS如何避免重排
如果Timeline内容区默认height: 0 + overflow: hidden做折叠，JS切换height: auto会触发重排。改用max-height过渡更安全：
-
max-height设一个足够大的值（如500px），比所有可能内容都高 - 过渡写
max-height 0.3s ease-in-out，不要加height - 折叠状态加
opacity: 0和visibility: hidden，避免占位空白 - 注意：iOS Safari对
max-height过渡有渲染bug，需加will-change: max-height
真正难的是时间标签（time）和内容区的视觉对齐——当内容展开后，左侧时间标签若用position: sticky，在滚动中可能错位。稳妥做法是放弃sticky，用align-self: flex-start配合Grid行对齐。
响应式Timeline最易被忽略的点：字体大小随视口缩放时，时间标签的line-height和padding必须用rem或clamp()同步缩放，否则小屏下文字挤在一起，大屏下间距发空。别只调font-size。
