HTML/CSS 元素定位(html 日程/日历)

Question

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

这是我目前拥有的:http://jsfiddle.net/Lpfg5/

我想要的是能够展开任何“ block ”，例如“Block-A”或“Block-B”。 block 后面的灰色条只是网格。

此外，我不确定让灰色网格与顶部的时间对齐的最佳方法是什么？

如有任何帮助，我们将不胜感激。

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

如果我没理解错的话，您希望 block a 和 block b 水平填充灰色条。我通过删除 .timeslot 上的填充并将宽度增加到 36px(8px + 8px + 原始宽度)来做到这一点。你可以在这里看到:

如果您指的是每个 block 的高度，则必须删除 .requestblock 上的 margin-top 并声明 height: 80px 就可以了。