移动端时间轴垂直布局在CSS中如何自适应多尺寸屏幕对齐？-css教程-PHP中文网

移动端时间轴垂直布局对齐失效主因是伪元素定位依赖固定值或父容器高度塌陷；应改用ol容器relative定位、min-height保障，伪元素仅负责圆点，竖线由ol::after绝对定位贯穿，避免单item内定位及50%横向偏移。

移动端时间轴垂直布局在css中如何自适应多尺寸屏幕对齐？

移动端时间轴垂直布局的对齐失效，90% 是因为伪元素定位依赖了固定值或未处理父容器高度塌陷。 直接用 left: 50% 或 top: 20px 画线，在 iOS Safari 或 Android Chrome 下极易偏移、断开、错位——这不是 CSS 写错了，是定位上下文没立住。

伪元素本身没有尺寸，它的定位完全依赖父元素的 position: relative 和计算上下文。常见错误包括：

给每个 .timeline-item 的 ::before 设 top: 20px —— 小屏字体缩放、行高变化后，20px 不再对应视觉中心
主竖线用 .timeline-item::after 而非 ol::after —— 每个项单独画线，一旦某项高度为 0（比如空内容），那截线就消失，整条线断裂
没设 min-height 或 height，父容器实际渲染高度为 0，top: 50% + transform: translateY(-50%) 失效

核心是把「定位锚点」从单个项上移走，交给语义容器统一控制：

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

下载

用 ol 作为主容器，加 position: relative 和 min-height: 100dvh（iOS Safari 16.4+ / Chrome 105+ 支持）；老版本 fallback 用 JS 注入 --vh
ol::after 画贯穿竖线：content: "" + position: absolute + top: 0; bottom: 0; left: 1.5rem; width: 2px
每个 .timeline-item 只负责圆点：::before { content: ""; position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #007bff; }
避免用 50% 做横向定位，改用固定偏移（如 left: 1.4rem），这样不随字体缩放抖动

不是 flex 排列的问题，而是语义结构被破坏导致的对齐逻辑混乱：

别用 .row .col-6 强分左右 —— 它会让时间点和内容在小屏上变成两列并排，但内容高度不一致时，圆点就悬空
正确结构用 <ol><li> <time>2024</time><div class="timeline-content">…</div> </li></ol>，小屏时 .timeline-content 自然堆叠在 <time></time> 下方
移动端对齐靠 flex-direction: column + align-items: flex-start，而不是 text-align: center —— 后者只影响文本水平位置，对整体块无效
如果必须左右交错（如奇左偶右），用 :nth-child(odd) 控制 margin-left，而非改变 flex 主轴方向