HTML/CSS元素定位（html日程表/日历）

Question

我创建了一个基于html和css的时间表/日历，但我遇到了一些问题。

这是我到目前为止有：http://jsfiddle.net/Lpfg5/

什么，我想是能够有任何的“块”，如“块A”或“块B”的，被拉伸出。块后面的灰色条只是网格。

此外，我不确定什么最好的方法是使灰色网格与顶部的时间排队？

任何帮助将不胜感激。

HTML代码：

<div id="schedule_row"> 
    <div class="day"> 
     &nbsp; 
    </div> 
    <div class="timehead"> 
     6 AM 
    </div> 
    <div class="timehead"> 
     7 AM 
    </div> 
    <div class="timehead"> 
     8 AM 
    </div> 
    <div class="timehead"> 
     9 AM 
    </div> 
    <div class="timehead"> 
     10 AM 
    </div> 
    <div class="timehead"> 
     11 AM 
    </div> 
    <div class="timehead"> 
     12 PM 
    </div> 
    <div class="timehead"> 
     1 PM 
    </div> 
    <div class="timehead"> 
     2 PM 
    </div> 
    <div class="timehead"> 
     3 PM 
    </div> 
    <div class="timehead"> 
     4 PM 
    </div> 
    <div class="timehead"> 
     5 PM 
    </div> 
    <div class="timehead"> 
     6 PM 
    </div> 
    <div class="timehead"> 
     7 PM 
    </div> 
    <div class="timehead"> 
     8 PM 
    </div> 
    <div class="timehead"> 
     9 PM 
    </div> 
    <div class="timehead"> 
     10 PM 
    </div> 
    <div class="timehead"> 
     11 PM 
    </div> 
</div> 
<div id="schedule_row" style="margin-top: -20px;"> 
    <div class="day daylist"> 
     <span class="weekday">Today</span> 
     <span class="date">Oct 19, 2012</span> 
    </div> 
    <div class="timeslot first"><div class="requestblock blue 2hr">Block A</div></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"><div class="requestblock red 2hr">Block B</div></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
</div> 
<div id="schedule_row"> 
    <div class="day daylist"> 
     <span class="weekday">Saturday</span> 
     <span class="date">Oct 20, 2012</span> 
    </div> 
    <div class="timeslot first"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
    <div class="timeslot"></div> 
</div>​ 

CSS：

#schedule_row { 
    min-height: 60px; 
    display: inline-block; 
} 
.day { 
    display: inline-block; 
    min-width: 100px !important; 
    font-size: 14px; 
    color: #6D645D; 
    float: left; 
} 
.daylist { 
    margin-top: 30px; 
} 
.timeslot { 
    display: inline-block; 
    float: left; 
    background: #E1E1E1; 
    margin-right: 3px; 
    padding: 8px; 
    position: relative; 
    min-height: 80px; 
    width: 20px; 
} 
.timehead { 
    color: #6D645D; 
    font-size: 12px; 
    display: inline-block; 
    margin-right: 5px; 
    width: 25px; 
    float: left; 
    margin-left: 10px; 
    text-align:center; 
    line-height: 13px; 
} 
span.weekday { 
    font-size: 15px; 
    font-weight: bold; 
} 
span.date { 
    font-size: 12px; 
    color: #A8A7A5; 
    display: block; 
} 
.requestblock { 
    background: #777777; 
    color: #fff; 
    padding: 1px 2px; 
    margin-top: 30px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -khtml-border-radius: 2px; 
    border-radius: 2px; 
    position: relative; 
    top: 0; 
    left:0; 
    z-index: 10; 
    font-size: 9px; 
} 
.blue { 
    background: #3A87AD; 
} 
.red { 
    background: #B94A48; 
} 
.first { 
    margin-left:5px; 
} 
.1hr { 
    min-width: 300px !important; 
} 
.2hr { 
    min-width: 100px !important; 
}​ 

Answer 1

如果我理解正确，你想阻止和B座，以填补水平的灰色条。我通过删除.timeslot上的填充并将宽度增加到36px（8px + 8px +原始宽度）来实现此目的。你可以在这里看到：

如果你指的是每个块的高度，你将不得不删除.requestblock上的margin-top并在其上声明height: 80px。