放置寬度過大的格子

Question

我有Div格子Container，其寬度爲100％;所以它的實際像素寬度可以從一個用戶改變到另一個用戶。裏面那個Container，我有10個箱，每箱有以下值：

width:8%; 
margin-left:1%; 
margin-right:1%; 
border:1px solid #000000; 
float:left; 

有了這些價值觀，它應該呈現這樣的，對不對？

其實事實並非如此。這些盒子有8％的寬度在空間和2％的寬度出空間（保證金），而且由於邊界線（1像素），每個盒子有10％的寬度+ 2px的

當您用分辨率播放，你會看到這個盒子不時會延伸出第二條線，看起來像這樣：

我該如何解決這個佈局問題？

我想過把另一個盒子放在那些可以設置外框邊框的盒子裏，但它對我來說不是很合適。

Answer 1

我爲此創建了一個jsfiddle。爲每個內框添加一個新的div並設置以下屬性可以解決問題。 （關鍵是將邊框從外框移到內框。）

width: 100%; 
height:100%; 
border: 1px solid #000000;