均匀或平等地分配DIVS ...是的我知道我应该使用一张桌子

Question

我有以下HTML代码/结构：

<div id="container">
 <div id="div1">text</div>
 <div id="div2">more text</div>
 <div id="div3">nice text</div>
 <div id="div4">bad text</div>
 <div id="div5">hello world</div>
 <div id="div6">foo</div>
 <div id="div7">bar</div>
 <div id="div8">Dick Beatie</div>
 <div id="div9">Chuck Norris</div>
 <div id="div10">Brian Blessard</div>
</div>

并说我有以下CSS：

#container{
  overflow:auto; 
  width:100%;
}

#container div{
 float:left;
 padding:10px;
 text-align:center;
 width:10%;
}

容器内的DIV大小相同但不适合容器！如何使它们适合当前溢出到下一行。请不要说我应该使用一张桌子，我知道我应该使用一张桌子。我也意识到我可以减少DIV的宽度，但是我必须调整容器的宽度。

感谢您的建议。

聚苯乙烯。我打赌一些小丑说要用桌子！

Answer 1

使用box-sizing: bordex-box在宽度中包含填充。