放置宽度超载的div

Question

我的Div名为Container，宽度为100％;所以它的实际宽度（以像素为单位）可以从一个用户变为另一个用户在Container里面，我有10个盒子，每个盒子都有以下值：

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

使用这些值，它应该像这样渲染，对吗？

实际上并非如此。这些方框的宽度为，空间为8％，宽度为2％（边距），由于边框线（1px），每个方框的宽度为10％+ 2px < / p>

当你使用分辨率时，你会看到盒子不时延伸第二行，它看起来像这样：

如何修复此布局？

我想在另外一个盒子里放置一个可以设置外盒边框的盒子，但这对我来说并不适合。

Answer 1

我为此创建了jsfiddle。为每个内盒添加新的div并设置以下属性将解决该问题。 （关键是将边框从外框移动到内框。）

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