dougan7657 2013-01-08 16:43
浏览 601
已采纳

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

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

enter image description here

PHP used to generate entries

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

i made a simple a jquery/php day scheduler(calendar), as show above.

as u can see i have parent div height:60px(1px each min) and position relative then i position child divs absolute according to its min (eg: demo patient is 10:00 so top:00px , fool patient is 10:40 so its top:40px). this is working fine except when there is overlapping time.. example if i have 2 entries same time then both will be positioned on top of each other.

Question how can i avoid this ? like google calendar if 2 booking exist the are moved side by side instead of on top of each other.

thanks

Problem solved:

using This plugin and following code

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;
    });

Now it works perfectly as google calendar :D.. thanks all

  • 写回答

3条回答 默认 最新

  • duanhuo3392 2013-01-08 16:57
    关注

    If you want a jquery solution to check if any elements overlaps then you can use this plugin brandonaaron/jquery-overlaps. You can do the checks for each element to check if any overlap then perform the function that will reposition the events within the parent

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题