0

我正在创建一个基于 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;
}​
4

1 回答 1

0

如果我对您的理解正确，您希望块 a 和块 b 水平填充灰色条。我通过移除填充.timeslot并将宽度增加到 36 像素（8 像素 + 8 像素 + 原始宽度）来做到这一点。你可以在这里看到这个：

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

于 2012-10-20T06:59:28.390 回答