Css盒流動性問題

Question

我一直試圖制作流體盒，當你調整窗口大小時會擠壓。

但這是發生了什么：

當我調整窗口大小時，第4個框移動到底部，然后框的寬度縮小。 為什么第四個盒子會移動？ 我究竟做錯了什么？

這是最新發生的事情： http ： //www.dinkypage.com/169785

請幫助

Answer 1

你需要使用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的填充頂部，現在它將被計算為240px高度的一部分，你應該將高度改為240px + 30px（頂部填充）+ 10px（底部填充）= 280px。

Answer 2

這是因為你給所有4個區塊的width: 25% ，但也給它們'填充：10px'，所以顯然寬度需要超過100% 。

您需要移除填充或減少塊的寬度小於填充的總長度，例如22%