Javascript 使用显示表和浮动的响应网格

演示：

如何使下面的拨号板响应？我试着在演示1:中使用宽度33%和一些JS，但我没有足够的余量

.key{
宽度：40px；
高度：40px；
背景：红色；
浮动：左；
边界半径：50%；
光标：指针；
文本对齐：居中；
显示：表格；
利润率：1%；
}
.key>span{
显示：表格单元格；
垂直对齐：中间对齐；
}
.clearFloat{
明确：两者皆有；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
0
德尔

在这里回答，伙计：

给我一个像

.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}

---

你是这样做的（每圈1%+33%+1%）。因此，当应用

边距：1%

时，宽度将>100%。因此，第三个圆圈将显示在下一行。@RLam是的，我知道这个问题，但我不知道当边距为1%时，满屏的百分比是多少。因此，每行总共有6%的边距。您可以将

.key

的

宽度设置为31%。像这样来满足你所需要的33.33%的一切，你是如何得到31%的呢？如果边距为2%或3%，宽度应该是多少？你是怎么计算的？31.33%+
左边的边距：1%
+
右边的边距：1%
=33.33%的宽度。慢，我已经解决了。