Javascript 元素在水平时间轴中的定位

我正在开发一个定制的时间轴功能，但我一直在研究如何解决边缘情况下需要的特定定位问题

在下面的片段中，我有3个演示时间表：

• 第一个是包含许多事件的时间线。时间线应该超出不合适的时间线。这是由

  li

  的给定

  min width

  确定的
• 第二个和第三个项目很少。此处的定位需要确保它们之间的间距相等

我还希望将第一个和最后一个事件分别拉到左侧和右侧，而不是居中

到目前为止，我所拥有的： 每个项目的宽度是根据事件数计算的。

minwidth

属性可防止大小变小。溢出是有意的

我想我应该通过使用

left/right:XX%

左右拉动元素来解决第一个和最后一个事件的间距问题，但元素的行为似乎是绝对定位的。我还尝试了

float

以及使用固定宽度并通过

margin

控制宽度，但也没有成功

.timeline容器{
溢出：隐藏；
位置：相对位置；
利润率：20px0；
}
.时间线容器{
列表样式：无；
宽度：100%；
高度：2倍；
空白：nowrap；
利润率：30px0；
填充：0；
背景：#EEE；
显示：内联块；
位置：相对位置；
}
.李先生{
显示：内联块；
位置：相对位置；
高度：9px；
最小宽度：150px；
}
.李：之前{
内容：“；
光标：指针；
宽度：12px；
高度：12px；
边框：2px实心3598DC；
显示：内联块；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
背景：白色；
z指数：100；
}
.ol li a{
位置：相对位置；
底部：30px；
显示：块；
文本对齐：居中；
填充：0；
}

2月8日
2月9日
2月11日
2月13日
2月17日
2月18日
2月19日
2月21日
2月22日
2月26日
2月28日
2月8日
2月28日
2月8日
2月9日
2月11日
2月13日

如果您对使用flexbox没问题，它可能看起来像这样：

对于许多时间线项目：

<div class="timeline many">
     <div class="timeline__item"></div>
     <div class="timeline__item"></div>
     <div class="timeline__item"></div>
     <div class="timeline__item"></div>
</div>

对于少数项目：

<div class="timeline few">
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
</div>

---

对于IE支持，您可以使用Gulp或Webpack等工具为您的样式添加前缀，或者将它们粘贴到在线样式中：

我个人会使用

flexbox

。对于有许多事件的时间线，将它们全部设置为具有

flex:1

属性将使它们自动等距排列，对于少数项目，您可以使用

justify content:space-between

使它们尽可能间距排列。@Coleman，由于IE的支持，我仍然稍微不喜欢使用flexbox，但如果这是唯一可行的解决方案，那绝对没问题。要不要贴个答案？谢谢。你能把设计附在这篇文章上吗？“溢出x无卷轴呢？”克里斯：当然，我明白了。您可以使用CSS自动引用器帮助解决该问题。它将为IE添加必要的属性。我也将发布一个答案。@Pangloss，你指的是什么设计？隐藏的溢出用于禁用滚动。稍后我将添加

按钮以使用javascript“滚动”。但这与atm无关。现在我只想让项目在每个场景中都很好地对齐（很少或很多项目）。我还没有测试过这个，但看起来很有希望。我该怎么做呢？时间轴事件是从服务器获取的，我无法事先知道应用哪种样式。我无法执行任何逻辑，如“如果超过x个项目，则执行…否则执行…”，因为这在视口之间会有所不同。：/需要比这更具动态性的解决方案。也许在较小的视口上，您可以切换到不同类型的视图，如垂直时间线？无论如何，在手机大小的屏幕上，水平方向的东西是没有意义的。

<div class="timeline few">
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
         <div class="timeline__item"></div>
</div>

.timeline {
    display: flex;
    flex-direction: row;
}

.few .timeline__item {
    justify-content: space-between;
}