结合浮动和绝对位置

Question

我正在创建一个日历，其中所有事件都显示在一个div中。根据{{​​1}}和top值，事件应放在确定的位置。让我告诉你。

在此图像中，早上6点的两个事件都处于相同的垂直对齐状态。我可以使用float: left^(jsfiddle)来解决这种行为。

如果事件没有height个冲突（高度和顶部碰撞），那么我可以使用absolute position^(jsfiddle)但不是vertical alignment来模拟此行为。

问题

真正的问题出现在我尝试将事件发布在上午9点和上午9点40分并使它们看起来像上面的图像。假设以下属性：

• float身高：50px，上：200px
• 9:00身高：50px，上：230px
• 9:40的底部：200px + 50px = 250px
• 9:00 event的顶部：230px
• 然后，他们正在垂直分享9:30 event（250px - 230px）。

这就是我尝试做这样的事情的原因：

20px

...但浮动属性在具有绝对位置的元素中不起作用。

概述

我的想法是将<div class="container"> <div class="event" style="height: 50px; top: 200px; float:left;">9 AM</div> <div class="event" style="height: 50px; top: 230px; float:left;">9:40 AM</div> </div> 值视为将事件根据其小时垂直放置在日历中的指南。例如，

• 早上6点 - ＆gt;上：100px
• 早上7点 - ＆gt;上：150px
• 晚上8点 - ＆gt;上：200px

实现方式

我尝试使用纯ccs自己解决这个问题，但我不介意应用javascript。但是，我无法向您展示我使用javascript的尝试，因为我甚至无法做出相当大的CSS结果。正如我之前所说，我使用顶级属性，因为我认为它可以很容易地进行位置操作，但如果有必要我可以使用另一种方法。提前谢谢。

Answer 1

您应该为div添加定位。如果您在课程中添加position:relative，则可以使用top:xxpx来偏移垂直位置。我认为你需要考虑许多可能使纯css解决方案变得困难的边缘情况，但认为这至少有帮助。

这是一个小提琴：http://jsfiddle.net/markm/qvevedva/

Answer 2

使用相对定位几乎解决了您的问题。但是，它在事件之间留下了空白：

Fiddle #1

我知道解决此问题的唯一方法是使用绝对定位，JavaScript确定top和left坐标：

var events= [].slice.call(document.querySelectorAll('.container div')),
                //array of event elements. See http://davidwalsh.name/nodelist-array
    count= [],  //running total of events during an hour. used to calculate left offset.
    i,          //loop through the events
    time,       //event time as array, such as ['6','AM']
    hour,       //event hour (1 - 24)
    minute,     //event minute (0 - 59)
    offset;     //top offset based on hour and minute

events.sort(function(a,b) {
  return a.textContent < b.textContent ? -1 : 1;
});

for(i = 0 ; i < events.length ; i++) {
  time= events[i].textContent.split(' ');
  hour= time[0].split(':')[0] * 1;
  if(time[1]==='PM' && hour !== 12) {
    hour+= 12;
  }
  minute= time[0].split(':')[1] || 0;
  offset= hour+minute/60;
  count[hour]= (count[hour] || 0)+1;
  events[i].style.top= (offset-6)*50 + 'px';
  events[i].style.left= count[hour]*100-100 + 'px';
}

Fiddle #2

请注意，此代码需要进行一些调整，以避免事件掩盖其他事件，就像你在12小时的小提琴中一样。

Answer 3

如果您使用margin-top代替top，该怎么办？您可能会得到这个结果：

您可能还需要为每小时创建一个容器div，并在其中包含基础事件div：

<div class="container">
   <div class="event" style="height: 50px;">6AM</div>
   <div class="event" style=" height: 50px;">6AM</div>
</div>
<div class="container">
   <div class="event" style="height: 50px;">9 AM</div>
   <div class="event" style="height: 50px; margin-top: 25px;">9:30 AM</div>
   <div class="event" style="height: 50px; margin-top: 33px;">9:40 AM</div>
</div>

以下是JSFiddle上的一些sample代码供参考。