我有一张代表日历月的表格。也就是说,每行是一周,每个单元格是一天。我想在每个单元格的左上角显示日期编号,就像它在大多数日历上一样(例如here),同时仍然允许其他内容,任意数量的单词/行,在单元格中,但我不能让它对齐。关于某些CSS(或HTML结构的更改,如果需要)可以使这个工作的任何想法?这是some example code。
谢谢!
答案 0 :(得分:4)
您可以通过使用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
答案 1 :(得分:1)
试试这个
td.day {position: relative;}
.date_num_container {position:absolute; top:0; left:0;}
答案 2 :(得分:1)
无需绝对定位
td.day
{
height:15%;
width:14%;
background:#ccc;
padding:0;
vertical-align:top;
}
div.date_num_container{
text-align:center;
}
答案 3 :(得分:0)
我不认为你的情况需要绝对定位。 你可以这么简单:
div.date_num_container {
height:100%;
//remove absolute positionning
}
.other_stuff {
margin-top:25px;
text-align:center
}