Html css 将宽度 100% 划分为 3 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18781713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css divide width 100% to 3 column
提问by Ing. Michal Hudak
I have a layout where I have 3 columns.
我有一个布局，其中有 3 列。
Therefore, I divide 100% by 3.
因此，我将 100% 除以 3。
The result is obviously 33.333....
结果显然是 33.333....
My goal isperfect 1/3 of screen.
我的目标是完美的1/3 屏幕。
Question:
题：
How many numbers after dot can CSS handle to specify 1/3 of width ?
CSS 可以处理多少个点后的数字来指定宽度的 1/3？
e.g. 33.33333(n=5)← how many ncan css handle
例如33.33333(n=5)← ncss可以处理多少
HTML:
HTML：
<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
CSS:
CSS：
#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
Is there a better way to divide by 3?
有没有更好的除以 3 的方法？
采纳答案by BenM
A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)
具有完全跨浏览器支持（IE9 以下的任何内容）的 CSS 中不可能存在完美的 1/3。我个人会这样做：（这不是完美的解决方案，但它与所有浏览器的效果一样好）
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
回答by Vucko
Use CSScalc():
使用CSScalc()：
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>References:
参考：
Update: as it's 2018. , use flexbox- no more inline-blockwhitespaceissues:
更新：在 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>Or even CSS gridif you are creating a grid.
如果您正在创建网格，甚至是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>回答by bring2dip
How about using the CSS3 flex model:
如何使用 CSS3 flex 模型：
HTML Code:
HTML代码：
<div id="wrapper">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
</div>
CSS Code:
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;
}
回答by Connell
Using this fiddle, you can play around with the widthof each div. I've tried in both Chrome and IE and I notice a difference in width between 33%and 33.3%. I also notice a very small difference between 33.3%and 33.33%. I don't notice any difference further than this.
使用这个 fiddle，你可以玩弄width每个 div 的 。我在 Chrome 和 IE 中都尝试过，我注意到33%和之间的宽度不同33.3%。我还注意到33.3%和之间的差异很小33.33%。我没有注意到除此之外的任何差异。
The difference between 33.33%and the theoretical 33.333...%is a mere 0.00333...%.
33.33%和理论之间的区别33.333...%只是一个0.00333...%。
For arguments sake, say my screen width is 1960px; a fairly high but common resolution. The difference between these two widths is still only 0.065333...px.
为了争论，假设我的屏幕宽度是1960px; 一个相当高但常见的分辨率。这两个宽度之间的差异仍然只有0.065333...px.
So, further than two decimal places, the difference in precision is negligible.
因此，超过两位小数，精度差异可以忽略不计。
回答by Yann Chabot
In case you wonder, In Bootstraptemplating system (which is very accurate), here is how they divide the columns when you apply the class .col-md-4 (1/3 of the 12 column system)
如果您想知道，在Bootstrap模板系统（非常准确）中，以下是当您应用类 .col-md-4 时它们如何划分列（12 列系统的 1/3）
CSS
CSS
.col-md-4{
float: left;
width: 33.33333333%;
}
I'm not a fan of float, but if you really want your element to be perfectly 1/3 of your page, then you don't have a choice because sometimes when you use inline-block element, browser can consider space in your HTML as a 1px space which would break your perfect 1/3. Hope it helped !
我不是浮动的粉丝，但如果你真的希望你的元素完美地占据页面的 1/3，那么你别无选择，因为有时当你使用内联块元素时，浏览器会考虑你的空间HTML 作为 1px 的空间会打破你完美的 1/3。希望有帮助！
回答by JMRC
Just in case someone is still looking for the answer,
以防万一有人还在寻找答案，
let the browser take care of that. Try this:
让浏览器来处理。尝试这个：
display: tableon the container element.display: table-cellon the child elements.
display: table在容器元素上。display: table-cell在子元素上。
The browser will evenly divide it whether you have 3 or 10 columns.
无论您有 3 列还是 10 列，浏览器都会将其平均划分。
EDIT
编辑
the container element should also have: table-layout: fixedotherwise the browser will determine the width of each element (most of the time not that bad).
容器元素还应该有：table-layout: fixed否则浏览器将确定每个元素的宽度（大多数时候还不错）。
回答by Kodek
.selector{width:calc(100% / 3);}
回答by Jean-Paul
Just to present an alternative way to fix this problem (if you don't really care about supporting IE):
只是为了提出一种解决此问题的替代方法（如果您并不真正关心支持 IE）：
A soft coded solution would be to use display: table(no support in IE7) along with table-layout: fixed(to ensure equal width columns).
软编码解决方案是使用display: table（在 IE7 中不支持）和table-layout: fixed（以确保等宽的列）。
Read more about this here.
在此处阅读更多相关信息。
回答by Garconis
I have found that 6 decimal placesis sometimes required (at least in Chrome) for the 1/3 to return a perfect result.
我发现有时需要6 个小数位（至少在 Chrome 中）才能使 1/3 返回完美的结果。
E.g., 1140px / 3 = 380px
例如，1140px / 3 = 380px
If you had 3 elements within the 1140 container, they would need to have a width set to 33.333333% before Chrome's inspector tool shows that they are at 380px. Any less amount of decimal places, and Chrome returns a lesser width of 379.XXXpx
如果 1140 容器中有 3 个元素，则它们的宽度需要设置为 33.333333%，Chrome 的检查器工具才会显示它们为 380 像素。小数位数越少，Chrome 返回的宽度越小，为379.XXX像素
回答by Brandito
2018 UpdateThis is the method I use width: 33%;width: calc(33.33% - 20px);The first 33% is for browsers that do not support calc() inside the width property, the second would need to be vendor prefixed with -webkit- and -moz- for the best possible cross-browser support.
2018 更新这是我使用的方法width: 33%;width: calc(33.33% - 20px);前 33% 用于不支持 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;dr account for your margin
tl;dr 说明您的保证金
