我正在尝试使用CSS display创建一个基于HTML/CSS的周日历:在对应于每一天的div上使用表格单元格样式。当我为day div指定一个大于17%的百分比宽度时,div会按预期填充整个屏幕(因为7*17% > 100%)。
jsfiddle这里:http://jsfiddle.net/huDxZ/1/
但是,当我指定16%或更小的百分比宽度时,div的行为完全不同,只占用页面宽度的一部分。
jsfiddle这里:http://jsfiddle.net/DLjnH/
我希望我的day div每个都有大约14%的宽度,这样它们就可以大致填满页面的宽度,并具有相同的大小。不幸的是,14%的宽度看起来更糟糕。
jsfiddle这里:http://jsfiddle.net/YB5bY/
是什么导致了这种意外行为?有什么办法可以绕过它吗?我需要显式地指定宽度,因为最终我希望日历的日期在鼠标经过时展开。
请不要使用涉及浮点的解决方案。
谢谢!
发布于 2012-02-27 19:15:53
我不能告诉你原因,但是如果你强制容器div
有100%的宽度,这两种情况的行为是相同的。
#calendar {
display: table;
height:900px;
width: 100%;
}
发布于 2012-02-27 19:13:11
好吧,我可能是疯了,但我会用桌子来做这样的事情...
并不是所有的表格都是邪恶的,只是那些用于布局的表格。
发布于 2012-02-27 19:18:56
表格单元格的宽度与父项的宽度相关,但父项是自动/未定义的。将width: 100%;
添加到您的#calendar
css定义中,以使它们正确运行。
https://stackoverflow.com/questions/9463986
复制相似问题