CSS 创建 3 个完全相等的列，占据浏览器窗口宽度的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7591343/
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
Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width
提问by cmal
I have 3 square images of the same size that are floating next to each other. I want the three images, in total, to take up the full 100% of the browser window width, with no gaps. Giving each image a width of 33.33333333% works in Firefox, but does not work in most other browsers at certain widths, which can sometimes leave a small gap to the right of the 3rd image.
我有 3 个大小相同的方形图像，它们彼此相邻浮动。我希望这三个图像总共占据浏览器窗口宽度的 100%，没有间隙。为每张图片设置 33.33333333% 的宽度在 Firefox 中有效，但在大多数其他浏览器中不适用于特定宽度，这有时会在第三张图片的右侧留下一个小间隙。
This may be a problem with many solutions, but nothing I've tried so far works reliably.
这可能是许多解决方案的问题，但迄今为止我尝试过的任何解决方案都无法可靠地工作。
采纳答案by Andres Ilich
Try this:
尝试这个：
HTML
HTML
<div class="container">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>
CSS
CSS
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.column {
width:33.33333333%;
float:left;
}
.column img {
width:100%;
height:auto;
}
Demo
演示
http://jsfiddle.net/andresilich/2p8uk/
http://jsfiddle.net/andresilich/2p8uk/
Single page demo
单页演示
http://fiddle.jshell.net/andresilich/2p8uk/show/
http://fiddle.jshell.net/andresilich/2p8uk/show/
CSS3 demo
CSS3 演示
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
width:100%;
}
.column {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background-color:#ddd;
}
.column img {
width:100%;
height:auto;
}
Demo
演示
http://jsfiddle.net/andresilich/2p8uk/2/
http://jsfiddle.net/andresilich/2p8uk/2/
Single page demo
单页演示
http://fiddle.jshell.net/andresilich/2p8uk/2/show/
http://fiddle.jshell.net/andresilich/2p8uk/2/show/
Update: (safari, sorta, fix)
Safari does not equate 33.33% to 100% like other browsers, you can either use my CSS3 demo, which does the sizing automatically through CSS, or you can encase everything inside a container with a 101% width and just hide that extra 1% with overflow:hidden;off of the third image. Try this:
更新：（safari、sorta、fix）Safari 不像其他浏览器那样等于 33.33% 到 100%，你可以使用我的 CSS3 演示，它通过 CSS 自动调整大小，或者你可以用 101% 将所有内容封装在容器中宽度，然后将多余的 1% 隐藏overflow:hidden;在第三张图像之外。尝试这个：
<div class="container">
<div class="inner">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>
</div>
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.inner {
width:101%;
overflow:hidden;
}
.column {
width:33.33333333%;
float:left;
}
.column img {
width:100%;
height:auto;
}
回答by Cyril Mestrom
For those that come here now (oct 2015) you can use calc:
对于那些现在（2015 年 10 月）来到这里的人，您可以使用 calc：
width:calc(100% / 3);
This will give you exactly 100% when added up. There are some browserbugs but you can use it without many issues: http://caniuse.com/#feat=calc
加起来时，这将为您提供准确的 100%。有一些浏览器错误，但您可以毫无问题地使用它：http: //caniuse.com/#feat=calc
回答by andromeda
My work around for this problem has always been as follows:
我解决这个问题的方法一直如下：
- Wrap the 3 columns in a row
- Have the first 2 columns occupy 33.333333% of the width
- Finally, select your last column using the last-child filter and apportion a width of 33.333334% (Note that you can apportion the 33.333334% to any of the columns - the first one using first-child filter or second one using the nth-child filter)
- 将 3 列包装成一行
- 让前 2 列占据宽度的 33.333333%
- 最后，使用 last-child 过滤器选择最后一列并分配 33.333334% 的宽度（请注意，您可以将 33.333334% 分配给任何列 - 第一个使用 first-child 过滤器或第二个使用 nth-child筛选）
Here's the HTML/CSS code
这是 HTML/CSS 代码
.row {
width: 100%;
}
.row .cols {
width: 33.333333%;
height: 150px;
float: left;
}
.row .cols:last-child {
width: 33.333334%;
}<div class="row">
<div class="cols">lorem</div>
<div class="cols">lorem</div>
<div class="cols">lorem</div>
</div>
<div class="row">
<div class="cols">lorem</div>
<div class="cols">lorem</div>
<div class="cols">lorem</div>
</div>回答by Jason Gennaro
Have you tried something like this...
你有没有尝试过这样的事情......
html, body{
margin:0;
padding:0;
}
div{
float:left;
height:100px;
width:33.33%;
background:red;
margin:0;
padding:0;
}
Example:http://jsfiddle.net/jasongennaro/jQA2Z/
示例：http : //jsfiddle.net/jasonennaro/jQA2Z/
EDIT
编辑
To get rid of that very small space at the right, wrap the divs and use a background-coloror background-imageto compensate.
要摆脱右侧的那个非常小的空间，请将divs包裹起来并使用 a background-colororbackground-image进行补偿。
div#wrapper{
height:100px;
background:red;
}
回答by Simon_Weaver
Without Javascript 33.33% is going to always give you <100% total when added up.
如果没有 Javascript，33.33% 的总和总是 <100%。
What about 3.5%. Can you afford to lose a pixel or two from the right?
3.5% 怎么样。你能承受从右边失去一两个像素吗？
Or put a solid background behind (guessing your answer to this one will be no - but possible)
或者在背后放置一个坚实的背景（猜测你对这个的回答是否定的 - 但可能）
回答by Eckstein
I'm not sure any of the above answers are correct, even two years later. This is what I always use to achieve three columns. It requires a couple unique classes, but there is no extra pixels or percentages needed.
即使两年后，我也不确定上述任何答案是否正确。这是我一直使用的实现三列的方法。它需要几个独特的类，但不需要额外的像素或百分比。
HTML:
HTML：
<div id="column-wrapper">
<div class="column left">
</div>
<div class="column mid">
</div>
<div class="column right">
</div>
<div style="clear:both;"></div>
</div>
CSS:
CSS：
#column-wrapper {
width: 1000px;
}
.column {
width: 320px;
float: left;
}
.column.mid {
margin: 0px 20px;
}
This is specifically for a 1000px wide layout, but you can change the math to any layout needed. They key is to make the width of each column a number that when subtracted from the entire width of the div, the resulting number is equally divisible by 2.
这是专门针对 1000 像素宽的布局，但您可以将数学更改为所需的任何布局。他们的关键是使每列的宽度成为一个数字，当从 div 的整个宽度中减去时，得到的数字可以被 2 整除。
For instance, if you wanted to do a 800px wide layout, your columns could be, say, 250px. That means that all three columns added together equal 750px, leaving you with 50px of total space left. So divide 50px by 2 and you get 25px, which is then what you put for your left and right margins on the center column.
例如，如果你想做一个 800 像素宽的布局，你的列可以是 250 像素。这意味着所有三列加在一起等于 750 像素，剩下的总空间为 50 像素。因此，将 50px 除以 2 得到 25px，这就是您在中心列上放置的左右边距。
Hopefully that makes sense, IMO it is the best and more simple way to achieve three equal columns with pure CSS.
希望这是有道理的，IMO 这是使用纯 CSS 实现三个相等列的最佳和更简单的方法。
