基于HTML&CSS的时间轴适配问题求助

问题描述：使用Stack Overflow上的时间轴示例时，当页面尺寸超出屏幕范围（容器出现滚动），class为event的元素会偏离时间轴线，希望仅通过CSS和HTML修复这个问题，让事件元素始终对齐时间轴线。

原始代码 #

HTML代码：

<h2>Artist Timeline</h2>
<div class="timeline">
    <div class="event up">
        <div class="detail">
            <h3>30 Mar 1853</h3>
            <p>Born in Groot-Zundert, the Netherlands</p>    
        </div>
    </div>
    <div class="event down">
        <div class="detail">
            <h3>Jul 1869</h3>
            <p>Joins The Hague branch of the firm Goupil & Cie.</p>       
        </div>
    </div>
</div>

CSS代码：

/* TIMELINE */

.timeline {
    height: 250px;
    margin: 1em;
    line-height: 250px;
    position: relative;
    text-align: center;
    overflow: scroll;
}
.timeline:before {
    content: '';
    position: absolute;
    width: 200%;
    top: 50%;
    left: 5%;
    height: 26px;
    margin-top: -13px;
    background: white;
}
.event {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 100px;
    display: inline-block;
    background: #7ed0df;
    vertical-align: middle;
    border-radius: 50%;
}
.detail {
    position: absolute;
    line-height: 1em;
    white-space: nowrap;
    left: 100%;
    color: white;
    font-size: smaller;
}

问题原因 #

原始代码依赖line-height和vertical-align: middle实现事件元素的垂直居中，但当容器出现横向滚动时，行框布局会被打破，导致event元素偏离时间轴线；同时时间轴的伪元素设置了width:200%和left:5%，无法自适应容器滚动后的位置。

解决方案 #

改用Flex布局实现稳定的垂直居中，同时调整时间轴伪元素和事件详情的定位逻辑：

修改后的CSS代码：

/* TIMELINE */
.timeline {
    height: 250px;
    margin: 1em;
    position: relative;
    overflow-x: scroll; /* 仅开启横向滚动，避免垂直滚动干扰 */
    display: flex; /* 使用flex布局实现对齐 */
    align-items: center; /* 垂直居中所有子元素 */
    gap: 200px; /* 替代margin控制事件间距，布局更稳定 */
    padding: 0 20px; /* 左右留白，避免事件贴边 */
}
.timeline:before {
    content: '';
    position: absolute;
    width: 100%; /* 宽度匹配容器，滚动时始终覆盖可视区域 */
    top: 50%;
    left: 0;
    height: 26px;
    margin-top: -13px;
    background: white;
    z-index: -1; /* 把时间轴放在事件元素下方，避免遮挡 */
}
.event {
    width: 50px;
    height: 50px;
    position: relative;
    background: #7ed0df;
    border-radius: 50%;
    flex-shrink: 0; /* 防止事件元素在容器变窄时被压缩 */
}
.detail {
    position: absolute;
    line-height: 1em;
    white-space: nowrap;
    color: white;
    font-size: smaller;
    left: 50%;
    transform: translateX(-50%); /* 让详情文本相对于事件圆点居中 */
}
/* 控制详情在时间轴上方或下方 */
.event.up .detail {
    bottom: 100%;
    margin-bottom: 10px;
}
.event.down .detail {
    top: 100%;
    margin-top: 10px;
}

关键修改点 #

• 用display: flex + align-items: center替代line-height和vertical-align，确保滚动时事件元素始终垂直居中
• 调整时间轴伪元素的width:100%和left:0，让它始终匹配容器宽度，不会因滚动错位
• 给event添加flex-shrink:0，防止元素在容器宽度不足时被压缩变形
• 优化detail的定位逻辑，让文本相对于事件圆点居中，同时通过up/down类控制上下位置，避免与时间轴重叠

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