javascript - 防止容器 div 在缩小时将最后一个内容 div 移动到下一行

Question

我有这个蛾日历，每月有 1- (28-31) 个区 block ，具体取决于月份。开头有 6 个“选项” block ，根据月份开始的星期几显示或隐藏，因此，如果该月从星期一开始，则所有 block 都会隐藏，如果是星期日，则显示所有这些 block 。问题是当页面缩小到 75% 或更低时，“星期日” block 会向下移动一行。如果你看到这个jsfiddle缩小到 75% 你就会明白我的意思了。这是我的CSS。谢谢。

.container{ width:58ex; 
            border:1px solid black;
            position:absolute;
          }

.date{  width:8ex; 
        height:8ex;
        border: 1px solid blue;
        float:left;
       }

  .day{ width:8ex;
        height:4ex;
        border: 1px solid grey;
        float:left; 
        background-color:grey;
       }

.option{ width:8ex;
        height:8ex;
        border: 1px solid white;
        float:left;
      }

Answer 1

您可以通过在 CSS 中进行以下更改来实现所需的效果:

.container {
     width:56ex;   // <-- instead of 58ex
     ...

.container > * { box-sizing: border-box; }

另请参阅此 short demo (基于您提供的代码)。

重要:
如Set Sail Media善意提醒我，该技术在 IE 版本 7 及更早版本中不支持。请参阅here 了解更多详情。

简短说明:
问题原因:
.container div 的宽度为“58ex”。每个 .day div 的宽度为“8ex”，每边边框为“1px”；总共“8ex + 2px”。我们必须将 7 个 .day div 放入 .container 的 58ex 中，即:

7 * (8ex + 2px) = 56ex + 14px must fit in 58ex <=>
14px must fit in 2ex

由于“px”是静态单位，但“ex”会动态变化(基于字体大小，而字体大小又取决于缩放系数)。不可避免地，我们会遇到 14px > 1ex 的情况，因此最后一个 div 不适合该行，必须折叠到新行上。

resque 的“border-box”:
引用 MDN，您使用 box-sizing:border-box 实现的是:
“宽度和高度属性包括填充和边框，但不包括边距。” (强调我的)
因此，您基本上告诉浏览器，您希望 .day div 的宽度为 8ex，包括内容、填充和边框。您可以阅读更多相关信息here 。