自动调整左侧浮动且位置绝对的重叠元素

Question

我正在创建每周议程。我有一个表作为时间和网格的背景，我有块设置为position：absolute和float：left。我的积木正在出现，但它们是重叠的。所以假设我有5个重叠的块，我需要一种方法来调整这五个块的大小，以便它们占用相等的空间。更难的是，这五个可能并非全部相互重叠。例如：

注意第一张图片中的重叠。如果有任何重叠，我需要它间隔适当。不太确定这是否有意义;如果这真的令人困惑，我会尽力澄清。基本上我只需要一种在一周日历上显示一堆时间块的方法，这些时间块将显示来自不同人的多个任命。如上所述，请记住，这些块的位置是：absolute和float：left，因为它们按像素位于表格顶部。至于解决方案，它可以是javascript或HTML，我真的不在乎，但请记住，我将不得不稍后添加拖动，所以我需要一种方法来动态重新排序，如果他们拖动一个盒子重叠。

更新

就像快速更新一样。在我的图中，这是一个例子。我无法保证只有4个格式的盒子会重叠。我可以有50个盒子在不同的点重叠，所以我可能需要一个通过JavaScript的算法。

另外，回答关于为什么位置的问题：绝对，这是我议程的截图：

注意后面的网格？那是一张桌子。每个元素都放在一行中，并在多行中展开。如果我没有绝对位置，它将自动扩展会扭曲网格的那一行。

Answer 1

您可以获取希望跨越的第一个时间段的渲染位置，然后将该位置设置为块的样式定义中的left和top值。 （您根本不需要float）

Find position of HTML element on page

或者，您可以拼接三个不同的图像。在这里，您将使用第一个时段的“顶部”图像，最后一个“底部”图像和中间所有插槽的“中心”图像，并将这些图像设置为相应表格单元格的背景。

但是，如果您需要能够使用文本填充整个块，则可能需要查看html表属性rowspan=""。

Answer 2

我认为这可以通过div和float轻松完成。请根据您设置高度和宽度