如何修复个人简历网站Qualification模块的垂直时间线？

问题背景 #

我用HTML、CSS、JS做个人简历网站，给Qualification模块做垂直时间线，现在已经搭好了垂直线、时间节点圆点和信息容器，但时间线总是断成几截，完整度不够。之前参考Codepen的示例重构过，结果反而布局乱套——元素重叠、线条断得更离谱，现在回到初始状态，求靠谱的修复方案。

当前效果：

目标效果：

常见问题&修复方案 #

先捋清楚为啥会断 #

垂直时间线断裂大多逃不开这几个原因：

• 时间线容器没设对position，导致线条没法贯穿所有节点
• 单个时间线项的布局脱离了文档流，把线条的连续渲染给打断了
• 线条的高度、定位属性写错了，覆盖不了所有节点的范围

修正后的代码示例 #

调整后的HTML结构

<div class="qualification-container">
  <div class="timeline-line"></div>
  <!-- 时间线项1 -->
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>本科 - 计算机科学</h3>
      <p>2018-2022</p>
      <p>某大学，GPA 3.8/4.0</p>
    </div>
  </div>
  <!-- 时间线项2 -->
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>前端开发工程师认证</h3>
      <p>2021</p>
      <p>完成XX前端课程并通过考核</p>
    </div>
  </div>
  <!-- 更多项按需添加 -->
</div>

修复后的CSS样式

/* 容器基础样式 */
.qualification-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* 垂直主线条 - 关键：让它贯穿整个容器 */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ddd;
  transform: translateX(-50%);
  z-index: 1; /* 让线条在内容下面 */
}

/* 单个时间线项 */
.timeline-item {
  position: relative;
  margin: 2rem 0;
  display: flex;
  align-items: center;
}

/* 奇数项内容放右边 */
.timeline-item:nth-child(odd) .timeline-content {
  margin-left: calc(50% + 2rem);
}

/* 偶数项内容放左边，调整顺序让内容在前 */
.timeline-item:nth-child(even) .timeline-content {
  margin-right: calc(50% + 2rem);
  order: -1;
}

/* 时间节点圆点 */
.timeline-dot {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #2563eb; /* 换成你的主题色 */
  border: 4px solid #fff;
  z-index: 2; /* 圆点要盖在线条上面 */
  transform: translateX(-50%);
}

/* 内容卡片 */
.timeline-content {
  background-color: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  width: calc(50% - 2rem);
}

核心调整点 #

1. 线条贯穿容器：把.timeline-line设为绝对定位，top:0; bottom:0让它从容器顶延伸到底，transform: translateX(-50%)保证居中，这样就不会断了。
2. 项布局规范：每个.timeline-item用相对定位，配合flex布局控制内容位置，奇数/偶数项交替左右排列，不会挤在一起。
3. 层级控制：圆点的z-index设得比线条高，再加上白色边框，视觉上就像悬浮在线条上，更符合目标效果。
4. 自适应高度：容器不要设固定高度，让它随内容自动撑开，线条自然就覆盖所有节点了。

响应式适配（可选） #

小屏幕下把时间线改到左侧，内容全靠右，避免重叠：

@media (max-width: 768px) {
  .timeline-line {
    left: 2rem;
  }
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .timeline-dot {
    left: 2rem;
  }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    margin: 0;
    width: 100%;
  }
}

内容的提问来源于stack exchange，提问作者Stanislava Stoeva