0

HTML および CSS ベースのスケジュール/カレンダーを作成していますが、いくつかの問題に遭遇しました。

これが私がこれまでに持っているものです: http://jsfiddle.net/Lpfg5/

私が望んでいるのは、「Block-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;
}​
4

1 に答える 1

0

私の理解が正しければ、ブロック a とブロック b で灰色のバーを水平方向に塗りつぶします。これを行うには、パディングを削除し.timeslot、幅を 36px (8px + 8px + 元の幅) に増やしました。これはここで見ることができます：

各ブロックの高さを参照している場合は、 on を削除しmargin-topて.requestblock宣言する必要がありheight: 80pxます。

于 2012-10-20T06:59:28.390 に答える