Question

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

谢谢！

Answer 1

您可以通过使用td设置父元素（position:relative）来轻松完成此操作，这会导致子元素绝对定位relative to the element in question，因为任何绝对定位的元素都是{ {3}}。正如Gaby aka G. Petrioli正确指出的那样，我链接到的规范没有定义table-cells在设置为position:relative时应如何处理的行为，但是所有浏览器实现都会始终如一地实现这一点，并且在一个案例中像这样我认为使用这个属性是合适的。

因此，您最终需要的是.day position:relative和.date_num_container设置为position:absolute; top:0px; left:0px;并且它开始工作，如您所见： positioned according to it's closest positioned - absolute, relative, or fixed - parent

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
}

将div / span对齐到表格单元格的左上角

4 个答案: