0

我手上有一个 CSS 问题，我似乎无法弄清楚。

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

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

我遇到的问题是四个 fase-div 不是内联的（尽管 CSS 说“显示：内联块”），而是当它们显示在超父 div 范围之外（可以滚动）时，它们在彼此下方。希望它们彼此相邻，但我似乎无法修复它。当它们被放置在 parentdiv 的范围内时，它们看起来又漂亮又整洁。

举例说明：我制作了一个有两个航程的 JSfiddle。一个立即可见（并且有效），第二个更靠右。正如你所看到的，这个根本不整洁。

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

我想念什么？

编辑

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

因此，float 和 block 将不起作用，因为现在它们失去了位置（这是显示 voyage-div 的点；））。

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

4

1 回答 1

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 会怎么做。
希望这会有所帮助，如果不能随时告诉我！

于 2012-08-21T13:10:22.000 回答