[英]Align div/span to top left of table cell
I have a table that represents a calendar month. 我有一个代表日历月的表。 That is, each row is a week, and each cell is a day. 也就是说,每行是一周,每个单元格是一天。 I'd like to display the date number in the top left of each cell, like it is on most calendars (eg, here ), while still allowing other content, of an arbitrary number of words/lines, to be in the cell, but I can't get it to align. 我想在每个单元格的左上角显示日期编号,就像在大多数日历中一样(例如, 这里 ),同时仍允许其他内容(任意数量的单词/行)在单元格中,但是我不能让它对齐。 Any ideas on some CSS (or changes to the HTML structure, if needed) that can make this work? 关于某些CSS(或HTML结构的更改,如果需要)可以使这个工作的任何想法? Here's some example code . 这是一些示例代码 。
Thanks! 谢谢!
You can easily do this by setting the parent element (the td
) with a position:relative
which causes the child elements to be absolutely positioned relative to the element in question , because any absolutely positioned element is positioned according to it's closest positioned - absolute, relative, or fixed - parent . 您可以通过使用position:relative
设置父元素( td
)来轻松完成此操作,这会导致子元素相对于相关元素绝对定位,因为任何绝对定位的元素都是根据它最接近的位置定位的 - 绝对的,相对的,或固定的 - 父母 。 As correctly noted by Gaby aka G. Petrioli
the spec I linked to does not define behavior of how table-cells
should funciton when set to position:relative
however all browser implementations do consistently implement this none the less and in a case like this I believe it appropriate to use this property. 正如Gaby aka G. Petrioli
所正确指出的那样,我链接到的规范没有定义table-cells
在设置到position:relative
时应该如何发挥作用的行为position:relative
但是所有浏览器实现确实始终如一地实现这一点,在这种情况下,我相信适合使用此属性。
So all you need in the end is have .day
be position:relative
and .date_num_container
be set to position:absolute; top:0px; left:0px;
所以你最终需要的是.day
是position:relative
和.date_num_container
设置为position:absolute; top:0px; left:0px;
position:absolute; top:0px; left:0px;
and it starts working as you can see here: http://cssdesk.com/ERpLC 它开始工作,你可以在这里看到: http : //cssdesk.com/ERpLC
try this 试试这个
td.day {position: relative;}
.date_num_container {position:absolute; top:0; left:0;}
No need for absolute positioning 无需绝对定位
td.day
{
height:15%;
width:14%;
background:#ccc;
padding:0;
vertical-align:top;
}
div.date_num_container{
text-align:center;
}
Demo at http://cssdesk.com/WMFrA 演示 http://cssdesk.com/WMFrA
I don't see the need for absolute positionning in your case. 在你的情况下,我认为不需要绝对定位。 You can take it simple: 你可以简单地说:
div.date_num_container {
height:100%;
//remove absolute positionning
}
.other_stuff {
margin-top:25px;
text-align:center
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.