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

Best way to represent 1/3rd of 100% in CSS?

提问by AKor

I have a big <div>with three little <div>'s inside of it, inline. They each have 33% width, but that causes some alignment problems because 3 * 33% != 100%. What is the best way to represent a perfect third in CSS like this? Maybe just 33.33%?

我有一个 big <div>，<div>里面有三个 little ，内联。它们每个都有 33% 的宽度，但这会导致一些对齐问题，因为 3 * 33% != 100%。像这样在 CSS 中表示完美三分之一的最佳方式是什么？也许只有 33.33%？

回答by Nathan Chase

Now that calcis widely supportedamong modern browsers, you can use:

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

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

Or you can use this as a fallback if your browser wouldn't support it:

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

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

回答by Marcel

Are you making any allowance for margins? You could go 30% per column with 5% margin either side of the center column.

您是否考虑了利润率？您可以每列 30%，中间列两侧各有 5% 的边距。

Quick example

快速示例

回答by Bruno Canongia

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

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

回答by Plutor

The highest resolution screen is a non-production NEC LCD screenwith a resolution of 2800x2100. Even at that size, one pixel is 0.0357% of the width of the screen. So 33.33%should be close enough until 5,000-pixel-wide screens become the norm.

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

John Resig did some researchinto sub-pixel rounding in different browsers, though, so depending on your three columns to equal exactlythe width of the screen may never have a perfect solution.

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