Question

我正在尝试在我的网站上制作日历。因此，在我的C＃代码中，我为该日历创建了所有表格单元格（我将其作为一个html字符串返回到我的视图中）。在这样做时，我检查我的数据库，看看是否有任何任务进入该单元格并循环通过它直到没有剩下任务。然后我转到下一个单元格并再次做同样的事情。

然而，有些任务跨越了一天，所以当我生成任务时，我会弄清楚它跨越了多少天，然后通过设置宽度超过那么多的表来创建围绕任务的div。细胞

然而，要显示这个跨越多天的div，我必须让所有这些div与css绝对。否则，因为我正在使用“css溢出”，任何不适合单元格的内容都会被隐藏，所以如果我在这个div上有背景颜色，它将仅显示该单元格的背景颜色，因为其余部分被隐藏。因此，即使宽度足够长，它总是隐藏在下面。

因此，通过使用“css absolute”，同一单元格中的所有任务都会相互堆叠。我发现如果我在每个div上放置一个margin-top我可以避免这种打桩。但是对于下一个问题它无济于事。

假设我的任务跨越1月1日至1月2日的2天。它的宽度恰好跨越2个单元格。

由于这个div具有绝对设置并且跨越2天。

此图像显示如果它跨越2天它会是什么样子。

现在他们去1月2日再添一个任务。这个任务将被放置在1月1日和1月2日任务的黄色背景之上，使得1月1日的任务不再明显延续到1月2日。

此图显示我在1月2日添加了另一项任务。因此重叠已经发生，很难说第一项任务跨越2天。现在想象一下，如果你必须完成2天相同的任务。

所以我需要一些方法来检测这些碰撞或某些东西，以便如果某些东西占据了那个空间，它就会将它向下移动或者某种东西。

我希望这是有道理的

你可以看到这个jquery插件，我之后会对它进行建模。他们知道如何将任务相互重叠。

我使用以下内容：

Answer 1

这是一个艰难的。

当使用绝对位置时，如果拍摄了该位置，则无法自动移动到另一个位置。

你可以作弊，让它们全部重叠并使用透明胶片（50％不透明度）和z-index。当时期重叠时，它们会闪耀。然后，您可以为每个句点指定一个onclick事件，使条形图z-index在后台执行一步，以实现非常原始的改组。非常粗略地说：

<div class="period" onclick="this.style.zIndex = this.style.zIndex-2;">1 Day span</div>

你必须实现一个机制来处理z-index将不断下降到零以下这一事实，所以这只是一个非常粗略的概述。

这在用户体验方面并不是很好，但它可以完成工作，用户仍然可以访问所有信息。

如果你想要做到这一点，我认为你不会在每一行中跟踪当前的“清晰车道”，即有多少运行时间以及你需要调整多少开始新时期的位置。

另一个更简单的方法是不使用绝对定位，而是在跨越整行的容器内使用普通的{-1}}。 编辑：但是当一段时间跨越多行时，这会给你带来麻烦。不，你不会自己计算这些职位。