在相对容器中绝对定位时如何避免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 高度：60px（每分钟 1px）和相对位置 然后我根据其最小值定位子 div 绝对值（例如：演示患者是 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

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

Answer 2

我会将您的输出更改为以下内容：

<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 3

您希望解决方案是什么？您希望这些项目彼此在之后，还是彼此相邻？无论如何，您可能只需要稍微调整一下您的位置，以考虑重叠的可能性。

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

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

然后将相对位置转换为像素坐标。您现在还应该知道您的列应该有多高才能容纳所有元素。