html如何设置三列列宽相等,CSS分割宽度100％到3列

我认为在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代码：

c1

c2

c3

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"}); });