组合浮动和绝对位置

Question

我正在创建一个日历，其中所有事件都显示在一个 div 中。根据 top 和 height 值，事件应该放在一个确定的地方。让我告诉你。

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

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

问题

真正的问题是当我尝试将事件放在上午 9 点和 9:40am 并使它们看起来像上图时。假定以下属性：

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

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

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

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

概述

我的想法是将 top 值作为指南，根据时间将事件垂直放置在日历中。例如，

早上 6 点 -> 顶部：100 像素
上午 7 点 -> 顶部：150 像素
8pm -> 顶部：200px

实现方式

我尝试使用纯 ccs 自己解决这个问题，但我不介意应用 javascript。但是，我无法向您展示我对 javascript 的尝试，因为我什至无法做出可观的 css 结果。正如我之前所说，我使用 top 属性是因为我认为它可以很容易地操纵位置，但如果有必要，我可以使用另一种方法。提前谢谢你。

Answer 1

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

这里是 fiddle：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

请注意，此代码需要进行一些调整以避免事件掩盖其他事件，正如您在 Fiddle 中为 12:00 下午所做的那样。

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>

这里有一些 sample JSFiddle 上的代码供参考。

组合浮动和绝对位置

Combine float and absolute position

html

javascript

css

absolute

css-float

问题

概述

实现方式

Fiddle #1

Fiddle #2