Question

根据月份的不同，我每个月都有1-（28-31）个街区。在开头有6个“选项”块，根据月份的星期几开始显示或隐藏，所以如果月份从星期一开始，所有块都被隐藏，如果是星期日，则显示所有这些块。问题是当页面缩小到75％或更少时，“星期日”块向下移动一行。如果您看到此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

好的，这里的诀窍是使用额外的HTML标记来分别设置子项和父<div>的样式。您可以根据需要使用维度，但如果您的数学运算正确，则这应该成立（每个.day和.date width属性需要是{{的1/7 1}}的{{1}}）。

这是更新的小提琴：http://jsfiddle.net/NX2vM/10/

这是如何工作的？父.container（width和<div>）包含width属性。我们添加一个子项，我们设置它的高度，其宽度将自动适应父项。我们将边框应用于此子div，因此边框为“inset”（100px宽，包括边框）与outset（100px + 1px左边框+ 1px右边框= 102px）

HTML（注意重复的div）：

.day

CSS：

.date

Answer 2

您可以通过在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”。我们必须在.day的58ex中包含7个.container div，即：

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

由于'px'是静态单位，但'ex'动态变化（基于字体的大小，而后者又取决于缩放因子）。不可避免地，我们来到14px > 1ex，所以最后一个div不适合在线上，必须折叠在新线上。

'border-box'到resque ：
引用MDN，你使用box-sizing:border-box得到的是：
“宽度和高度属性包括填充和边框，但不包括边距。” （强调我的）
所以，你基本上告诉浏览器，你希望.day div是8ex宽包括内容，填充和边框。您可以阅读更多相关信息 here 。

保持容器div在缩小时将最后一个内容div移动到下一行

2 个答案: