Question

我正在写一个日历，并试图将div中包含的日历编号保存在同一个地方。但是，当我在div中为事件添加文本时，文本似乎正在向上推送数字。从阅读中我得知这与块元素在垂直方向上相互推动有关。我已经在数字div和事件div中设置了相对位置的位置，因为如果我将它移到绝对位置，那么所有元素都会打印在彼此之上。我已经尝试过各种其他css标签组合无济于事。

以下是jsfiddle说明问题和代码：

CSS

table.calendar {
    table-layout: fixed;
    width: 520px;
}
div.day-number   { 
    background:#999; 
    z-index:2; 
    top:0px; 
    right:1px; 
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
}
td.calendar-day, td.calendar-day-np { 
    width:70px; 
    padding:5px 25px 5px 5px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
}
div.event {
    position:relative; 
    z-index:3; 
    top:15px;
    text-width: 70px;
}

HTML

<table class="calendar">
    <tr>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thur</td>
        <td>Fri</td>
</tr>
<tr>
         <td class="calendar-day"><div class="day-number">14</div><p>&nbsp;</p><p>&nbsp;</p></div></td>
    <td class="calendar-day"><div class="day-number">15</div><p>&nbsp;</p><p>&nbsp;</p></div></td>
<td class="calendar-day"><div class="day-number">16</div><div class="event">4:00PM<br>Go to gym</div><p>&nbsp;</p><p>&nbsp;</p></td>
    <td class="calendar-day"></td>
    <td class="calendar-day"><div class="day-number">18</div><p>&nbsp;</p><p>&nbsp;</p></div></td>
            </tr></table>

任何人都可以建议解决此问题。提前谢谢。

Answer 1

这里有一个我认为应该如何完成的小提琴，

http://jsfiddle.net/CarlG/FCq3U/

您会注意到我没有使用表结构。

Table用于表格数据，我认为这些数据不属于日历类别，原因是使用table将限制如何操纵外观和感觉使用CSS的日历。

相反，我使用了div个标签。

Answer 2

在日历日课程中添加以下行。

vertical-align:top;

CSS：将多个元素保存在同一个地方

2 个答案: