对齐css时间轴组件以进行动态数据渲染

我正在尝试构建一个时间轴组件，因此时间轴组件主要有4个组件

环流

虚线

左侧细节

右侧细节

因此，我可以添加这些组件，但如何对齐这些组件，以便根据提供的动态数据使用。文本应位于每个圆圈的左侧和右侧

我建议您创建“TimelineEvent”组件，以便它们包含关于每个事件的数据和信息（显然，它们是作为道具接收的）

我将使用一个表来保持行垂直对齐：

#包装器{
显示：内联块；
}
桌子{
边界塌陷：塌陷；
}
.时间表事件{
高度：100px；
}
.timeline事件：类型的第一个。timeline破折号{
最高：50%；
身高：50%；
}
.timeline事件：类型的最后一个。timeline破折号{
身高：50%；
}
.中间单元{
位置：相对位置；
}
.圆形包装{
位置：相对位置；
宽度：20px；
}
.圆圈{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
宽度：20px；
高度：20px；
背景色：番茄；
边界半径：100%；
z指数：2；
}
.时间线短跑{
位置：绝对位置；
宽度：50%；
身高：100%；
排名：0；
右边框：1px纯黑；
z指数：1；
}

事件数据

第二排
事件信息
事件数据

第二排

第三排
事件信息
事件数据
第二行
第三行
事件信息

您的沙盒链接是broken@GalAbra对不起，现在请检查谢谢，让我试试这种方法，我在想，如果我有一个包含左、圆、线和右数据的组件作为容器，那么我可以根据数据进行贴图和渲染，最后一个容器不会有虚线，这取决于你，我只是想说明表格是一种很好的方法：）如何放置动画，使其看起来像一条画线，现在刷新时它不会有任何动画。你知道这方面是什么意思吗？就像这条线是从上到下画的一样？现在整个组件在加载时一个接一个地显示出来，就像你在电子商务网站上看到的一样，一个接一个地加载数据