我有一个布局，其中有 3 列。
因此，我将 100% 除以 3。
结果显然是 33.333....
我的目标是完美1/3 的 screen。
CSS可以处理点后多少个数字来指定宽度的1/3？
eg ← css 可以处理33.33333 (n=5)多少个n
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
有没有更好的除以3的方法？
现在是 2018 年，使用flexbox - 不再有inline-block 空格问题：
body {
margin: 0;
}
#wrapper {
display: flex;
height: 200px;
}
#wrapper > div {
flex-grow: 1;
}
#wrapper > div:first-of-type { background-color: red }
#wrapper > div:nth-of-type(2) { background-color: blue }
#wrapper > div:nth-of-type(3) { background-color: green }<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>如果您正在创建网格，甚至可以使用CSS 网格。
body {
margin: 0;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
}
#wrapper>div:first-of-type { background-color: red }
#wrapper>div:nth-of-type(2) { background-color: blue }
#wrapper>div:nth-of-type(3) { background-color: green }<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>使用CSS calc()：
body {
margin: 0;
}
div {
height: 200px;
width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
width: calc(100% / 3);
display: inline-block;
}
div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }<div></div><div></div><div></div>参考：
完全跨浏览器支持的 CSS 中不可能存在完美的 1/3（任何低于 IE9）。我个人会这样做：（这不是完美的解决方案，但它与所有浏览器一样好）
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
使用 CSS3 flex 模型怎么样：
HTML 代码：
<div id="wrapper">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
</div>
CSS 代码：
*{
margin:0;
padding:0;
}
#wrapper{
display:-webkit-flex;
-webkit-justify-content:center;
display:flex;
justify-content:center;
}
#wrapper div{
-webkit-flex:1;
flex:1;
border:thin solid #777;
}
使用这个小提琴，你可以玩弄width每个 div 的。我在 Chrome 和 IE 中都试过了，我注意到 和 之间的宽度有所33%不同33.3%。33.3%我还注意到和之间有一个非常小的差异33.33%。我没有注意到比这更进一步的区别。
33.33%和理论上的区别33.333...%仅仅是一个0.00333...%。
为了争论，假设我的屏幕宽度是1960px; 一个相当高但普遍的分辨率。这两个宽度之间的差异仍然只有0.065333...px.
因此，超过小数点后两位，精度差异可以忽略不计。
.selector{width:calc(100% / 3);}
如果您想知道，在Bootstrap模板系统（非常准确）中，当您应用 .col-md-4 类（12 列系统的 1/3）时，它们是如何划分列的
CSS
.col-md-4{
float: left;
width: 33.33333333%;
}
我不喜欢浮动，但如果你真的希望你的元素完全占据页面的 1/3，那么你别无选择，因为有时当你使用 inline-block 元素时，浏览器可以考虑你的空间HTML 作为一个 1px 的空间，它会打破你完美的 1/3。希望它有所帮助！
以防万一有人还在寻找答案，
让浏览器来处理。尝试这个：
display: table在容器元素上。display: table-cell在子元素上。无论您有 3 列还是 10 列，浏览器都会将其平均划分。
编辑
容器元素也应该有：table-layout: fixed否则浏览器将确定每个元素的宽度（大多数时候还不错）。
只是为了提供一种解决此问题的替代方法（如果您并不真正关心支持 IE）：
软编码解决方案是使用display: table（IE7 中不支持）以及table-layout: fixed（以确保等宽列）。
在此处阅读有关此内容的更多信息。
2018 更新
这是我使用width: 33%; width: calc(33.33% - 20px);的方法前 33% 用于在 width 属性中不支持 calc() 的浏览器，第二个需要以供应商为前缀 -webkit- 和 -moz- 以获得最佳跨浏览器支持。
#c1, #c2, #c3 {
margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights
width: 33%; //fallback for browsers not supporting calc() in the width property
width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side.
width: -moz-calc(33.33% - 20px);
width: calc(33.33% - 20px);
}
tl;博士帐户为您的保证金
我发现1/3 有时需要6 位小数（至少在 Chrome 中）才能返回完美的结果。
例如，1140 像素 / 3 = 380 像素
如果您在 1140 容器中有 3 个元素，则需要将它们的宽度设置为 33.333333%，然后 Chrome 的检查器工具才会显示它们为 380 像素。任何更少的小数位数，Chrome 返回的宽度更小，为379.XXX像素
我不认为你可以在 CSS 中做到这一点，但你可以用 javascript 计算像素完美宽度。假设您使用 jQuery：
HTML 代码：
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
JS代码：
$(function(){
var total = $("#container").width();
$("#col1").css({width: Math.round(total/3)+"px"});
$("#col2").css({width: Math.round(total/3)+"px"});
$("#col3").css({width: Math.round(total/3)+"px"});
});