將div / span對齊到表格單元格的左上角

Question

我有一個代表日歷月的表。 也就是說，每行是一周，每個單元格是一天。 我想在每個單元格的左上角顯示日期編號，就像在大多數日歷中一樣（例如， 這里 ），同時仍允許其他內容（任意數量的單詞/行）在單元格中，但是我不能讓它對齊。 關於某些CSS（或HTML結構的更改，如果需要）可以使這個工作的任何想法？ 這是一些示例代碼 。

謝謝！

Answer 1

您可以通過使用position:relative設置父元素（ td ）來輕松完成此操作，這會導致子元素相對於相關元素絕對定位，因為任何絕對定位的元素都是根據它最接近的位置定位的 - 絕對的，相對的，或固定的 - 父母 。 正如Gaby aka G. Petrioli所正確指出的那樣，我鏈接到的規范沒有定義table-cells在設置到position:relative時應該如何發揮作用的行為position:relative但是所有瀏覽器實現確實始終如一地實現這一點，在這種情況下，我相信適合使用此屬性。

所以你最終需要的是.day是position:relative和.date_num_container設置為position:absolute; top:0px; left:0px; position:absolute; top:0px; left:0px; 它開始工作，你可以在這里看到： http ： //cssdesk.com/ERpLC

Answer 2

試試這個

td.day {position: relative;}
.date_num_container {position:absolute; top:0; left:0;}

Answer 3

無需絕對定位

td.day
{
    height:15%;
    width:14%;
    background:#ccc;
    padding:0;
    vertical-align:top;
}

div.date_num_container{
  text-align:center;
}

演示 http://cssdesk.com/WMFrA

Answer 4

在你的情況下，我認為不需要絕對定位。 你可以簡單地說：

div.date_num_container {
height:100%;
//remove absolute positionning
}

.other_stuff {
margin-top:25px;
text-align:center
}