1

我一直在尝试制作在调整窗口大小时会挤压的流体框。

但这就是正在发生的事情：

当我调整窗口大小时，第 4 个框移动到底部，然后框的宽度缩小。为什么第 4 个盒子在下面？我究竟做错了什么？

这是发生了什么： http ://www.dinkypage.com/169785

这是来源： http ://pastebin.com/raw.php?i=4ZbbXxCq

请帮忙

4

2 回答 2

2

你需要使用box-sizing: border-box. 这是因为你分配给每个浮动 div 元素的 10px 的内边距是在你分配的 25% 宽度之上添加的，所以所有四个浮动 div 的宽度的实际总和将超过 100%（实际上，它将是 100% + (2*10px)*4 = 100% + 80px

该box-sizing: border-box属性将确保您为元素设置的高度和宽度也将包括填充（如果有）和/或边框宽度（如果有）。

事实上，我建议Paul Irish 的建议使用：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

由于您还明确声明了您的高度，您可能希望更改容器的高度以反映盒子模型中的变化。由于您有一个 30px 的 padding-top，现在它将被计算为 240px 高度的一部分，您应该将高度更改为 240px + 30px（顶部填充）+ 10px（底部填充）= 280px。

于 2013-04-08T08:30:43.193 回答
2

这是因为你给了width: 25%所有 4 个块，但也给了 'padding: 10px' 给它们，所以很明显宽度需要超过100%.

例如，您需要删除填充或将块的宽度减小到小于填充的总长度22%

于 2013-04-08T08:33:23.540 回答