CSS分割宽度100％到3列
我有布局，我有3列。 在那里，我除以100％。
结果显然是33.333 ….
我的目标是完美的三分之一的屏幕 。
题：
CSS后可以处理多less个数字来指定宽度的1/3？
例如33.33333 (n=5) < – 可以处理多lessn
HTML：
<div id="wrapper"> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> </div>
CSS：
#c1, #c2, #c3 { width: 33%; // 1/3 of 100% }
如果你知道更好的方式除以3，那么我打开你的build议:)
我认为在CSS中不存在完美的1/3。 我个人会这样做
#c1, #c2 { width: 33%; // 1/3 of 100% } #c3 { width: auto; //or width:34%; }
使用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>
如何使用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; }
使用这个小提琴 ，你可以玩每个div的width 。 我已经尝试了Chrome和IE浏览器，我注意到宽度在33%和33.3%之间的差异。 我也注意到33.3%和33.33%之间的差别非常小。 我没有注意到任何进一步的差异。
33.33%与理论值33.333...%之间的差值仅为0.00333...% 。
为了参数，说我的屏幕宽度是1960px ; 一个相当高，但共同的决议。 这两个宽度之间的差异仍然只有0.065333...px 。
所以，小数点后两位以上，精度差别可以忽略不计。
以防有人仍在寻找答案，
让浏览器照顾这一点。 尝试这个：
-
display: table容器元素上的display: table。 -
display: table-cell子元素上的display: table-cell。
无论您有3列还是10列，浏览器将均分。
编辑
容器元素还应该有： table-layout: fixed否则浏览器将确定每个元素的宽度（大部分时间不是那么糟糕）。
如果你想知道，在Bootstrap模板系统（这是非常准确的），这是他们如何应用类.col-md-4（12列系统的1/3）
CSS
.col-md-4{ float: left; width: 33.33333333%; }
我不是浮动的粉丝，但是如果你真的希望你的元素完全是你网页的1/3，那么你没有select，因为有时当你使用内联块元素时，浏览器可以考虑你的空间HTML作为1px的空间，这将打破你的完美1/3。 希望它有帮助！
只是提出一个解决这个问题的另一种方法（如果你真的不关心支持IE）：
软编码解决scheme将使用display: table （IE7中不支持）和table-layout: fixed （确保列宽相等）。
阅读更多关于这里 。
我发现，有时需要6位小数 （至less在Chrome中）1/3才能返回完美的结果。
例如，1140px / 3 = 380px
如果您在1140容器中有3个元素，则在Chrome的检查器工具显示为380px之前，它们需要将宽度设置为33.333333％。 任何less量的小数位，铬返回一个较小的宽度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"}); });
