HTML/CSS元素定位(HTML计划/日历)

Question

我正在创建一个基于HTML和CSS的时间表/日历，但是我遇到了一些问题。

这是我到目前为止所拥有的：http：//jsfiddle.net/lpfg5/

我想要的是能够伸出任何"块"，例如"块A"或" Block-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

如果我正确地理解了您，则需要块A和B块B才能水平填充灰色条。我通过删除.timeslot上的填充并将宽度增加到36px（8px 8px 原始宽度）来做到这一点。您可以在这里看到此内容：

如果您引用每个块的高度，则必须在.requestblock上删除margin-top并在其上声明height: 80px。