php - 绝对定位在相对容器中时如何避免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>

图片

用于生成条目的 PHP

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

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

如你所见，我有父级 div 高度:60 像素(每分钟 1 像素)和相对位置然后我根据它的最小值绝对定位子 div(例如:演示病人是 10:00 所以 top:00px，傻瓜病人是 10:40 所以它的 top: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

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