Css盒流动性问题

Question

我一直在尝试制作液体盒子，当你调整窗口大小时它会挤压。

但这是发生的事情：

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

这是最新发生的事情： http://www.dinkypage.com/169785

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

请帮助

Answer 1

您需要使用box-sizing: border-box。这是因为您为每个浮动div元素分配的10px填充是在您指定的25％宽度之上添加的，因此所有四个浮动div的宽度的实际总和将超过100％（事实上，它将是100％+（2 * 10px）* 4 = 100％+ 80px

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

事实上，我建议Paul Irish's recommendation使用：

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

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

Answer 2

这是因为你将width: 25%提供给所有4个区块，但也提供了填充：10px＆＃39;显然，宽度需要超过100%。

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