html - 将一个 div 置于其他两个 div 之上居中

Question

我必须制定一个简短的时间表概览。我的问题是发生在午夜的事件。

我想做的是:

在左侧，我有一个带有日期的“列”(我使用 div)。在第一列旁边的第二列中，我有我的事件。

没问题，对于同一天开始和结束的事件。事件不是文本，这是花哨的 div，其中一些添加了信息和图标，但在这里我将它们显示为文本。

2012-02-25    Event 1 (8:00-11:00)              {Some space}              Event 2 (13:00-15:00)              {20px space}--------------------------------------------2012-02-26    {20px space}              Event 3 (8:00-11:00)              {Some space}              Event 4 (13:00-15:00)

很好!但是现在，对于发生在午夜的事件，我想将事件 div 放在分隔两天并居中的线上，所以每个事件 div 的高度为 30px，线的高度为 2px，这意味着我想要 14px开始日期的通宵事件和结束日期的 14px。

每一天的“行”也是一个 div。所以我希望将夜间事件放在两个“行”div 和线(可能是 <hr> ，可能是 <div> )之上。

现在我的问题是，这可能吗？如果可能，怎么办？

最好的问候

编辑:

这是一个 jsFiddle:http://jsfiddle.net/NoiZy/6Dkta/

现在每天应该在红线上方放置一个额外的事件，一半大小。

Answer 1

我可能会做这样的事情 http://jsfiddle.net/6Dkta/61/将每一天的行设置为“position:relative”，然后将重叠事件设置为我给一个类的重叠事件，以便您可以动态添加。 twoDay 类将位置设置为绝对位置，将底部设置为 -34 像素。这样，无论行的大小如何，它都会始终与底部重叠。不确定这是否适用于您的设置，但它适用于 fiddle 。