javascript - 如果有足够的空间，将 DIV 堆叠在一行中

Question

我希望创建一个水平时间线并避免一个极端的性能价格问题。

假设我们有 3 个事件表示为 3 个 div。

<div class="timeline">
<div id="Ev1">
  Event 1
</div>
<div id="Ev2">
  Event 2
</div>
<div id="Ev3">
  Event 3
</div>

现在我希望它们根据水平轴在所需的时间内显示每个我尝试为此使用 margin 但肯定没有用，因为它们没有设置为 float:左边;问题是我不希望它们向左浮动我想通过使用 margin 或 left:##px 或可以转换为时间计算的任何其他方式。

这是 CSS:

body {
  background: #AAA;
}

.timeline {}

.timeline div {
  height: 30px;
}

#Ev1 {
  background: #e10b1f;
  width: 600px;
  margin-left: 231px
}

#Ev2 {
  background: #fb7d29;
  width: 230px;
}

#Ev3 {
  background: #96cf67;
  width: 460px;
}

我知道我可以使用 JS 来计算我有多少个并行事件并根据 offset 修复 top 属性等等，但这正是我想要的我试图避免，因为当我们在时间线上查看数百个事件时，它会导致服务器性能下降。

我正在寻找一种优雅的方式来告诉浏览器，如果一行中有足够的空间，一个接一个地显示 DIV，但如果没有，则将它们一个一个地堆叠在顶部，并根据事件时间进行相应的偏移。

代码笔:http://codepen.io/arthurv/pen/WwbmRr

Answer 1

我不确定我是否了解您要执行的操作。这行得通吗？

.timeline div {
    display: inline-block;
}