0

我正在创建一个每周议程。我有一个表格作为时间和网格的背景,并且我有设置为位置的块:绝对和浮动:左。我的块出现了,但它们是重叠的。所以假设我有 5 个重叠的块,我需要一种方法来调整这五个块的大小,以便它们占用相等的空间。更难的是,这五个可能并不都相互重叠。例如:

在此处输入图像描述

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

更新

就像快速更新一样。在我的图表中,这是一个例子。不能保证我将只有 4 个具有这种重叠格式的框。我可以有 50 个框都在不同的点重叠,所以我可能需要一个通过 javascript 的算法。

另外,要回答为什么位置:绝对的问题,这是我的议程截图:

在此处输入图像描述

注意到后面的网格了吗?那是一张桌子。每个元素都放置在一行内,并延伸到多行。如果我没有绝对位置,它将自动扩展该行,这会扭曲网格。

4

2 回答 2

0

您可以只获取您希望跨越的第一个时隙的渲染位置,然后将该位置设置为块的样式定义中lefttop值。(你根本不需要float

在页面上查找 HTML 元素的位置

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

但是,如果您需要能够用文本填充整个块,您可能需要查看 html table 属性rowspan=""

于 2012-09-06T02:56:39.223 回答
0

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

在此处输入图像描述

于 2012-09-06T03:02:41.507 回答