将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
}