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

时间:2013-12-24 10:22:29

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

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

谢谢!

4 个答案:

答案 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;
}

演示 http://cssdesk.com/WMFrA

答案 3 :(得分:0)

我不认为你的情况需要绝对定位。 你可以这么简单:

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

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