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

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

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

What do you want the solution to be? Do you want the items to be positioned after each other, or next to each other? In any case, you probably just need to tweak your positioning a little to take into account the possibility for overlap.

Don't use the raw time to position them, but do your overlap resolution first, see which elements overlap, give them a relative position, ie:

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

then convert the relative positions to pixel coordinates. You should now also know how high your column should be to fit all the elements.

I would change your output to be along the lines of this:

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

Then they will float next to each other