我认为在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}
如何使用CSS3 flex模型:
HTML代码:
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代码:
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"}); });