私はカレンダーを書いていて、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> </p><p> </p></div></td>
<td class="calendar-day"><div class="day-number">15</div><p> </p><p> </p></div></td>
<td class="calendar-day"><div class="day-number">16</div><div class="event">4:00PM<br>Go to gym</div><p> </p><p> </p></td>
<td class="calendar-day"></td>
<td class="calendar-day"><div class="day-number">18</div><p> </p><p> </p></div></td>
</tr></table>
誰でもこの問題の修正を提案できますか。前もって感謝します。