Scroll 如何确保块内联工作？

我手上有一个CSS问题，我就是想不出来

我的目标是实现这一点：

有一个非常大的div（voyagescontainer），宽度为2190px。在这个div中，我有几个较小的div（航海），其中包含更多的div（一个带有4个fase div的fasecontainer，下面是一个信息div，与fasecontainerdiv一样宽）

我遇到的问题是，这四个fase div不是内联的（尽管CSS说“display:inline block”），但是当它们显示在superparent div（可以滚动）的范围之外时，它们是在彼此下面的。我希望它们彼此相邻，但我似乎无法修复它。当它们被放置在parentdiv的范围内时，它们看起来很整洁

举个例子：我做了一个带两次航行的JSFIDLE。一个在眼前（并起作用），第二个在右边。正如你所看到的，这个一点也不整洁

我错过了什么

编辑

两个航程div相距很远的原因是航程div和时间线div是时间固有的。div的开始时间是2012年1月1日，结束时间正好是5年后，1day=4px。我从数据库中检索航程的开始日期，并计算该日期与2012年1月1日之间的天数。乘以4是相对于voyageSdiv（宽7304px），voyageSdiv需要保留的像素数

因此，浮子和挡块将不起作用，因为现在它们失去了位置（这是显示航次div的点；）

---

稍后，当这起作用时，我将使用jQuery使div的大小可调整/可拖动，这样我们就可以在时间线上以图形方式计划内容

如果你想与IE的旧版本兼容，你应该避免使用内联块。而不是尝试使用浮动。这就是你想要的吗

我所做的就是改变这个：

.voyage{
    display: inline-block;
    position:absolute;
    width:auto;
}

为此：

.voyage{
    display: block;
    float: left;
    width:auto;
}

您可以添加边距，使它们看起来更明显，但不确定您要的是什么

编辑：
现在你的目标已经清楚了，我再次更新了小提琴：
正如之前建议的那样，我将内联样式

left:##px

更改为

marginleft:#px

。在我看来似乎工作得很好。请注意，我还将值更改为整数。我建议您在服务器端脚本中将数字转换为整数，因为屏幕上没有半像素这样的东西。只会产生无用的字节，而你永远不知道我们的好朋友IE会如何利用它。

---

希望这对我有帮助，如果不方便，请随时告诉我

谢谢你的回答，但这不是我想要的答案。请参阅上面的我的更新，了解它们相距如此之远的原因：）