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

Question

22

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

然而，当我指定小于或等于16%的百分比宽度时，div的行为完全不同，只占用页面宽度的一部分。

我希望每个day div的宽度约为14％，以便它们大致填满页面并具有相等的大小。不幸的是，14％的宽度看起来更糟。

这是jsfiddle链接: http://jsfiddle.net/YB5bY/

什么导致了这种意外的行为？有没有什么方法可以解决它？我需要明确指定宽度，因为最终我希望日历的日期在鼠标悬停时能够扩展。请不要使用浮动的解决方案。谢谢！

- Dylan

4个回答

10

我不能告诉你原因，但如果你强制给容器div设置100%的宽度，这两种情况的行为是相同的。

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

- Rui Carneiro

解决了我的问题。非常感谢！ - Dylan

不能把每个人都标记为已回答，但是当我有足够的声望时，我会给你点赞。 - Dylan

6

嗯，我可能有点疯狂，但是对于这种事情，我会使用表格...

并不是所有的表格都是邪恶的，只有用于布局的表格才是...

- Madara's Ghost

5

您的表格单元格宽度相对于其父容器的宽度，但父容器的宽度是自动/未定义的。为了使其正确显示，请在您的#calendar CSS定义中添加width: 100%;。

- kontur

可以了！非常感谢。虽然我不能将你们全部标记为已回答问题，但当我的声望足够高时，我会点赞的。 - Dylan

只接受第一个发布的答案 ;) 对于简单的问题，人们通常会同时回答相同的解决方案。 - kontur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Didier Ghys · Accepted Answer

CSS规则中的百分比值始终相对于父元素具有相同属性的值。
尝试为容器添加显式宽度：

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

接下来你可以在".day"元素中使用14%。