时间轴事件线条适配：解决内容重叠的div高度调整需求

嘿，我来帮你搞定这个时间轴事件重叠的问题！要实现「线条+旁侧文本」的时间轴，同时避免相邻事件内容碰撞，我们可以通过CSS基础布局+JavaScript动态检测调整来实现，下面是具体的实现思路和代码示例：

一、基础HTML结构 #

先搭建时间轴的基本结构，每个事件包含线条元素和文本容器：

<div class="timeline">
  <div class="timeline-event">
    <div class="timeline-line"></div>
    <div class="timeline-text">note number 1</div>
  </div>
  <div class="timeline-event">
    <div class="timeline-line"></div>
    <div class="timeline-text">This line is the same height as the first one</div>
  </div>
  <div class="timeline-event">
    <div class="timeline-line"></div>
    <div class="timeline-text">this line is lower so it doesn't hit the text above it</div>
  </div>
</div>

二、CSS基础样式 #

设置时间轴的整体布局，线条默认高度和文本的样式：

.timeline {
  position: relative;
  padding-left: 30px;
  max-width: 600px;
  margin: 20px auto;
}

.timeline-event {
  position: relative;
  margin-bottom: 20px;
}

.timeline-line {
  position: absolute;
  left: -15px;
  top: 0;
  width: 2px;
  background-color: #2c3e50;
  /* 线条默认高度继承父元素高度（即文本容器的高度） */
  height: 100%;
  transition: height 0.3s ease;
}

.timeline-text {
  background: #ecf0f1;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  max-width: 80%;
}

三、JavaScript动态调整逻辑 #

核心是检测相邻事件的文本是否重叠，若重叠则缩短当前事件的线条高度，并调整事件间距：

function adjustTimelineLines() {
  const events = document.querySelectorAll('.timeline-event');
  
  // 重置所有线条高度和事件间距，避免重复调整出错
  events.forEach(event => {
    event.querySelector('.timeline-line').style.height = '100%';
    event.style.marginTop = '0';
  });
  
  for (let i = 1; i < events.length; i++) {
    const currentEvent = events[i];
    const prevEvent = events[i - 1];
    
    // 获取前一个文本的底部坐标和当前文本的顶部坐标
    const prevTextRect = prevEvent.querySelector('.timeline-text').getBoundingClientRect();
    const currentTextRect = currentEvent.querySelector('.timeline-text').getBoundingClientRect();
    
    // 判断是否重叠：当前文本顶部低于前一个文本底部
    if (currentTextRect.top < prevTextRect.bottom) {
      const overlapDistance = prevTextRect.bottom - currentTextRect.top;
      const currentLine = currentEvent.querySelector('.timeline-line');
      
      // 缩短线条高度，减去重叠部分+额外间距（10px是预留的安全间距）
      currentLine.style.height = `${currentLine.offsetHeight - overlapDistance - 10}px`;
      // 调整当前事件的上边距，让文本和上一个文本拉开距离
      currentEvent.style.marginTop = `${overlapDistance + 10}px`;
    }
  }
}

// 页面加载、窗口 resize 时执行调整
window.addEventListener('load', adjustTimelineLines);
window.addEventListener('resize', adjustTimelineLines);

// 如果是动态添加事件，添加后记得调用这个函数
// 比如：addNewTimelineEvent(); adjustTimelineLines();

额外注意事项 #

• 如果你的时间轴是双向布局（左右两侧都有文本），可以扩展逻辑，分别检测左侧和右侧文本的重叠情况
• 可以根据需求调整overlapDistance + 10中的10px，控制文本之间的间距
• 若事件内容是异步加载的，要确保内容加载完成后再调用adjustTimelineLines()函数

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