在CSS中代表100%的1/3的最佳方式？

我有一个大的

，里面有三个小的

，内联的。它们每个都有33%的宽度，但这会导致一些对齐问题，因为3*33%！=100%. 什么是最好的方式来表示一个完美的第三个CSS像这样？也许只有33.33%？

你有没有考虑利润？你可以在每一列上加30%，中间列两边各加5%的边距

---

最高分辨率屏幕的分辨率为2800x2100。即使在这个尺寸下，一个像素也是屏幕宽度的0.0357%。因此

33.33%

应该足够近，直到5000像素宽的屏幕成为标准

---

但是，在不同的浏览器中进行亚像素舍入，因此根据您的三列精确等于屏幕宽度可能永远不会有完美的解决方案。

既然

calc

是现代浏览器之一，您可以使用：

#myDiv {
    width: calc(100% / 3);
}

或者，如果您的浏览器不支持此功能，您也可以将其用作后备功能：

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

---

只需输入足够的小数位，直到不太可能有人有足够大的桌面来制作与计算相关的sig.figs。你不能指定分数，所以33.33%几乎是你唯一的选择。有用信息：这就是为什么用12基数而不是10基数来计算会很棒的原因。一半=6，三分之一=4，四分之一=3，六分之一=2。三分之二=8，四分之三=9。Base 10是一种油漆，对于当前的非生产监视器，“高”听起来有点低。作为当前的技术上限，这看起来更合理一些。这个答案不太适合未来2021：从我的3840x2160标准生产监视器上写下这条评论不要忘记回退：

。第三列{宽度：33.33%；宽度：calc（100%/3）；}

。这样，您就可以支持非计算器浏览器。我发现，要正确计算div的精确1/3，小数点后6位通常是必需的。

width:33.333%

.col_1_3{宽度：33.33%；float:left；}是一种更好的方法。可能需要一些盒子尺寸：边框盒子和一些填充物。

.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}