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。