如何用纯CSS实现响应式Timeline时间线组件？-css教程-PHP中文网

响应式timeline应采用语义化html结构（ul.timeline > li.timeline-item > time + .timeline-content），用css grid实现横竖布局切换，移动端竖排、桌面端双列，主轴线用伪元素统一绘制并媒体查询隐藏，内容展开用max-height过渡防重排。

如何用纯css实现响应式timeline时间线组件？

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></section>或<div>套多层，避免嵌套后flex/gird行为不可控。<h3>用CSS Grid实现横竖自动切换的关键断点写法</h3> <p>别在<code>@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都画一条——那样在移动端会变成一堆重叠的短线。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

主轴线高度靠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;
  }
}`