如何在相对容器中定位绝对时避免div重叠

Question

HTML

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
        <div style="position:absolute;top:00px;" class='entry'>Demo patient</div>
        <div style="position:absolute;top:20px;" class='entry'>New patient</div>
        <div style="position:absolute;top:40px;" class='entry'>fool patient</div>
</div></td>

PIC

PHP用于生成条目

echo"<div style='position:absolute;top:".date("i", strtotime($data['time_booked']))."px;'>{$data['name']}</div>";

我制作了一个简单的jquery / php日程安排程序（日历），如上图所示。

你可以看到我有父div高度：60px（每分钟1px）和位置相对 然后我根据它的分钟定位子divs绝对（例如：演示患者是10:00所以顶部：00px，傻瓜患者是10:40所以它的顶部：40px）。 这是正常工作，除非有重叠时间..例如，如果我有2个条目 同一时间，两者将相互叠加。

问题我该如何避免这种情况？就像谷歌日历一样，如果存在2个预订则会并排移动而不是相互叠加。

感谢

问题已解决：

使用This plugin并使用以下代码

var n=$('div.entry').overlaps().length;var vol=(100/n);var round=0;
    $('div.entry').overlaps().each(function(){
        $(this).css('left',((vol-1)*round)+'%');
        $(this).css('width',(vol-n)+'%')
        round=round+1;
    });

现在它完美地作为谷歌日历：D ..谢谢所有

Answer 1

我会改变你的输出：

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
    <div style="position:absolute;top:00px;"><span>Demo patient</span></div>
    <div style="position:absolute;top:20px;"><span>New patient</span><span>2nd patient at this time</span></div>
    <div style="position:absolute;top:40px;"><span>fool patient</span></div>
</div></td>

然后他们会漂浮在彼此旁边

Answer 2

如果您想要一个jquery解决方案来检查是否有任何元素重叠，那么您可以使用此插件brandonaaron/jquery-overlaps。您可以对每个元素执行检查以检查是否有任何重叠，然后执行将重新定位父级中的事件的函数

Answer 3

您希望解决方案是什么？您希望项目在之后相互定位，还是在旁边？在任何情况下，您可能只需稍微调整一下您的定位，以考虑重叠的可能性。

不要使用原始时间来定位它们，而是先做重叠分辨率，看看哪些元素重叠，给它们一个相对位置，即：

(0,0)
(1,0)   (1,1)  // overlap here
(2,0)

然后

将相对位置转换为像素坐标。您现在还应该知道列的高度应该适合所有元素。