我有一个布局，我有3列。
因此，我将100％除以3。
结果显然是33.333 ......
目标完美屏幕的1/3 。
CSS可以处理多少个数字以指定1/3的宽度？
e.g。 33.33333 (n=5)←{c}可以处理多少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？
答案 0 :(得分：86)
使用 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>
参考文献：
更新：因为它是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 grid。
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>
答案 1 :(得分：22)
如何使用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;
}
答案 2 :(得分：21)
完全跨浏览器支持的CSS（IE9以下任何东西）都不能存在完美的1/3。我个人会这样做:(这不是完美的解决方案，但它与所有浏览器一样好）
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
答案 3 :(得分：8)
使用this fiddle，您可以使用每个div的width。我在Chrome和IE中都尝试过，我注意到33%和33.3%之间的宽度不同。我还注意到33.3%和33.33%之间的差异非常小。我没有注意到任何不同之处。
33.33%与理论33.333...%之间的差异仅仅是0.00333...%。
为了论证，请说我的屏幕宽度为1960px;相当高但常见的分辨率。这两个宽度之间的差异仍然只有0.065333...px。
因此，超过两位小数，精度差异可以忽略不计。
答案 4 :(得分：7)
如果你想知道，在Bootstrap模板系统（这是非常准确的），下面是它们在你应用类.col-md-4（12列系统的1/3）时划分列的方式）
CSS
.col-md-4{
float: left;
width: 33.33333333%;
}
我不是浮动的粉丝，但是如果你真的希望你的元素完全是你页面的1/3，那么你没有选择，因为有时当你使用inline-block元素时，浏览器可以考虑您的HTML中的空间为1px空间，这将破坏您完美的1/3。希望它有所帮助！
答案 5 :(得分：5)
以防有人仍在寻找答案，
让浏览器处理这个问题。试试这个：
display: table。display: table-cell。无论您有3列还是10列，浏览器都会平均分配。
修改
容器元素也应该有：table-layout: fixed否则浏览器将确定每个元素的宽度（大部分时间都不差）。
答案 6 :(得分：2)
提出另一种方法来解决这个问题（如果你真的不关心支持IE）：
软编码解决方案是使用display: table（IE7中不支持）和table-layout: fixed（以确保相等的宽度列）。
详细了解此here。
答案 7 :(得分：1)
我发现有时需要 6位小数（至少在Chrome中）1/3才能返回完美的结果。
例如，1140px / 3 = 380px
如果您在1140容器中有3个元素，则在Chrome的检查工具显示它们为380px之前，它们的宽度必须设置为33.333333％。任何少量的小数位数，Chrome返回的宽度 379.XXX px
答案 8 :(得分：1)
2018年更新
这是我使用的方法width: 33%; width: calc(33.33% - 20px);前三个用于不支持在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;博士计算您的保证金
答案 9 :(得分：1)
.selector{width:calc(100% / 3);}
答案 10 :(得分：0)
我不认为你可以在CSS中做到这一点，但你可以使用javascript计算像素完美宽度。假设您使用jQuery：
HTML code：
<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"});
});