将 div/span 与表格单元格的左上角对齐答案

【问题标题】：Align div/span to top left of table cell将 div/span 与表格单元格的左上角对齐
【发布时间】：2014-01-12 14:15:03
【问题描述】：

我有一个代表日历月的表格。也就是说，每一行是一周，每个单元格是一天。我想在每个单元格的左上角显示日期编号，就像在大多数日历上一样（例如，here），同时仍然允许任意数量的单词/行的其他内容在单元格，但我无法让它对齐。关于一些 CSS（或更改 HTML 结构，如果需要）的任何想法可以使这项工作？这是some example code。

谢谢！

【问题讨论】：

标签： html css css-position html-table vertical-alignment

【解决方案1】：

您可以通过使用position:relative 设置父元素（td）轻松做到这一点，这会导致子元素绝对定位relative to the element in question，因为任何绝对定位的元素都是positioned according to it's closest positioned - absolute, relative, or fixed - parent。正如Gaby aka G. Petrioli 正确指出的那样，我链接到的规范没有定义table-cells 在设置为position:relative 时应该如何运行的行为，但是所有浏览器实现都始终如一地实现这一点，在这种情况下，我认为它是合适的使用此属性。

所以你最终需要的只是将.day 设置为position:relative 和.date_num_container 设置为position:absolute; top:0px; left:0px;，它开始工作，如您在此处看到的： http://cssdesk.com/ERpLC

【讨论】：

【解决方案2】：

在您的情况下，我认为不需要绝对定位。你可以简单点：

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

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

【讨论】：

【解决方案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

【讨论】：

请注意，现在单元格内容也得到了处理，而绝对定位您仍然可以完全控制所有不同的内容。
@DavidMulder 你不能在表格单元格上设置相对位置。见w3.org/TR/CSS21/visuren.html#choose-position
为了在语义上正确，您不应该在表格单元格上设置相对位置，您仍然可以并且请注意，尽管不在规范中，但跨浏览器的实现是一致的。
@DavidMulder 实际上不是……在 FF 和 Safari（for windows）中，您的代码不起作用……所有数字都显示在屏幕的顶部/左侧。不在它们各自的td 元素中..

【解决方案4】：

试试这个

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

【讨论】：