html - 放置宽度超载的 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

当您使用分辨率时，您会看到框不时延伸第二行，并且看起来像这样：

我该如何解决这个布局？

我想过在那些盒子里放另一个盒子来设置外盒子的边框，但这对我来说不太适用。

Answer 1

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

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