0

我有这个带蛾子的压延机，每个月有 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;
      }
4

2 回答 2

2

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

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

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

另请参阅这个简短的演示（基于您提供的代码）。

重要提示：
正如 Set Sail Media提醒我的那样，IE 7 及更早版本不支持此技术。有关更多详细信息，请参见此处。

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

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的是：
“宽度和高度属性包括填充和边框，但不包括边距。” （强调我
的）所以，你基本上告诉浏览器，你希望.daydiv 为 8ex 宽，包括内容、填充和边框。你可以在这里阅读更多关于它的信息。

于 2013-05-21T19:22:20.873 回答
2

好的，这里的技巧是使用额外的 HTML 标记来<div>分别设置 children 和 parent 的样式。您可以根据需要调整尺寸，但如果您的数学运算正确，这应该是正确的（每个.day和属性都需要是's 的.date width1/7 ）。.containerwidth

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

这是如何运作的？父级<div>(.day和.date) 包含 width 属性。我们添加一个孩子，我们设置其高度和宽度将自动适应父级。我们将边框应用到这个子 div，所以边框是“inset”（100px 宽，包括边框）与 outset（100px + 1px 左边框 + 1px 右边框 = 102px）

HTML（注意重复的 div）：

<div class = "container">

<div class = "day"><div>mon</div></div>
<div class = "day"><div>tue</div></div>
<div class = "day"><div>wed</div></div>
<div class = "day"><div>thu</div></div>
<div class = "day"><div>fri</div></div>
<div class = "day"><div>sat</div></div>
<div class = "day"><div>sun</div></div>


<div class = "option" id = "opp_1"></div>
<div class = "option" id = "opp_2"></div>
<div class = "option" id = "opp_3"></div>
<div class = "option" id = "opp_4"></div>
<div class = "option" id = "opp_5"></div>
<div class = "option" id = "opp_6"></div>

<div class = "date"><div>1</div></div>
<div class = "date"><div>2</div></div>
<div class = "date"><div>3</div></div>
<div class = "date"><div>4</div></div>
<div class = "date"><div>5</div></div>
<div class = "date"><div>6</div></div>
<div class = "date"><div>7</div></div>
<div class = "date"><div>8</div></div>
<div class = "date"><div>9</div></div>
<div class = "date"><div>10</div></div>
<div class = "date"><div>11</div></div>
<div class = "date"><div>12</div></div>
<div class = "date"><div>13</div></div>
<div class = "date"><div>14</div></div>
<div class = "date"><div>15</div></div>
<div class = "date"><div>16</div></div>
<div class = "date"><div>17</div></div>
<div class = "date"><div>18</div></div>
<div class = "date"><div>19</div></div>
<div class = "date"><div>20</div></div>
<div class = "date"><div>21</div></div>
<div class = "date"><div>22</div></div>
<div class = "date"><div>23</div></div>
<div class = "date"><div>24</div></div>
<div class = "date"><div>25</div></div>
<div class = "date"><div>26</div></div>
<div class = "date"><div>27</div></div>
<div class = "date"><div>28</div></div>
<div class = "date"><div>29</div></div>
<div class = "date"><div>30</div></div>
<div class = "date"><div>31</div></div>
</div>

CSS：

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

.date{ 
    width:100px; 
    float:left;
}
.date div {
    border: 1px solid blue;
    height:50px;
}

.day{ 
    width:100px;
    float:left; 
    background-color:grey;
}
.day div {
    border: 1px solid grey;
    height:20px;
}

.option{ 
    width:100px;
    height:50px;
    float:left;
}
于 2013-05-21T19:19:43.910 回答