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

Question

我有一个很大的内部<div>有三个小<div>内联.它们各有33%的宽度,但这会导致一些对齐问题,因为3*33%!= 100%.在这样的CSS中表现完美第三的最好方法是什么？也许只有33.33%？

Answer 1

现在calc被广泛支持的现代浏览器中,你可以使用:

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

或者,如果您的浏览器不支持,您可以将其用作后备:

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

Answer 2

您是否正在考虑保证金？每列可以达到30%,中心列两侧的边距为5%.

快速举例

Answer 3

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

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

Answer 4

最高分辨率屏为非量产NEC液晶屏，分辨率为2800x2100。即使在那个尺寸下，一个像素也是屏幕宽度的 0.0357%。所以33.33%应该足够接近，直到 5,000 像素宽的屏幕成为常态。

不过，John Resig 对不同浏览器中的子像素舍入进行了一些研究，因此根据您的三列来精确等于屏幕宽度可能永远不会有完美的解决方案。