指定 CSS 表格单元格的百分比宽度

Question

我正在尝试使用 CSS display:table-cell 样式在与每一天对应的 div 上创建一个基于 HTML/CSS 的周历。当我为日期 div 指定大于 17% 的百分比宽度时，div 按预期填满整个屏幕（因为 7*17% > 100%）。

jsfiddle 在这里：http: //jsfiddle.net/huDxZ/1/

但是，当我指定 16% 或更小的百分比宽度时，div 的行为完全不同，仅占用页面宽度的一部分。

jsfiddle 在这里：http: //jsfiddle.net/DLjnH/

我希望我的日 div 每个都有大约 14% 的宽度，这样它们就可以大致填满页面的宽度并且具有相同的大小。不幸的是，14% 的宽度看起来更糟。

jsfiddle 在这里：http://jsfiddle.net/YB5bY/

是什么导致了这种意外行为？有什么办法吗？我需要明确指定宽度，因为最终我希望日历的日期在鼠标悬停时展开。

拜托，没有涉及浮动的解决方案。

谢谢！

原文由 Dylan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 规则百分比值总是相对于父级相同属性的值。

尝试向容器添加显式宽度：

 #calendar {
    display: table;
    height:900px;
    width: 100%;
}

然后您可以将 14% 用于“.day”元素。

原文由 Didier Ghys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我无法告诉您原因，但如果您强制容器 div 具有 100% 宽度，则两种情况的行为是相同的。

 #calendar {
    display: table;
    height:900px;
    width: 100%;
}

更新版本：http: //jsfiddle.net/DLjnH/1/

原文由 Rui Carneiro 发布，翻译遵循 CC BY-SA 3.0 许可协议