Question

我的手上有一个CSS问题，我似乎无法弄明白。

我的目标是实现这一目标：

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

我遇到的问题是四个fase-div不是内联的（尽管CSS表示“display：inline-block”）但是当它们显示在superparent div的范围之外时它们彼此在一起（可以我希望它们彼此相邻，但我似乎无法解决它。当它们被放置在parentdiv的范围内时，它们看起来很好看。

为了说明：我已经制作了一个有两次航行的JSfiddle。一个是立即（和工作），第二个是更右边。正如你所看到的，这个根本不是什么。

http://jsfiddle.net/8BCur/1/

我想念什么？

修改

两次航行的重点是远离彼此，因为航行时间和时间线是时间固有的。 div的开头是2012年1月1日，结束时间恰好是5年后，1天= 4px。我从数据库中检索航程的开始日期，并计算该日期与2012年1月1日之间的天数。那个时间4是voyage-div需要留下的像素数，相对于voyageSdiv（宽度为7304px）。

因此，浮动和阻止将无法工作，因为现在他们失去了位置（这是显示航行 - div的点;）。

稍后，当这个工作时，我正在使用jQuery使div可调整大小/可拖动，因此我们可以在时间线上以图形方式计划内容。

Answer 1

如果你想与旧版本的IE兼容，你应该避免使用内联块。而不是尝试使用浮子。这就是你追求的吗？ http://jsfiddle.net/8BCur/2/

我所做的就是改变这个：

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

到此：

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

您可以添加边距以使其显得更加明显，但不确定您的目标是什么......

修改
现在很清楚你在追求什么，我再次更新了小提琴：http://jsfiddle.net/8BCur/7/
正如我之前所建议的那样，我将内联样式left: ##px更改为margin-left: ##px。似乎工作得很好imo。请注意，我还将值更改为整数。我建议你在服务器端脚本中将数字转换为整数，因为屏幕上没有半像素。只是产生无用的字节，你永远不知道我们的好朋友IE可能会做些什么希望这有帮助，如果不随意让我知道！

如何确保block-inline正常工作？

1 个答案: