CSS CSS并排div的自动等宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5351634/
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 side by side div's auto equal widths
提问by Faizal Balsania
<div id="wrapper" style="width:90%;height:100px;background-color:Gray;">
<div id="one" style="height:100px;background-color:Green;float:left;"></div>
<div id="two" style="height:100px;background-color:blue;float:left;"></div>
<div id="three" style="height:100px;background-color:Red;float:left;"></div>
</div>
I have a parent div which will contain 2 or 3 child divs. I want child divs to take equal widths automatically.
我有一个包含 2 或 3 个子 div 的父 div。我希望子 div 自动采用相等的宽度。
Thank You
谢谢你
回答by thirtydot
It's not impossible. It's not even particularly hard, with the use of display: table.
这不是不可能的。使用display: table.
This solution will workin modern browsers. It won't work in IE7.
此解决方案适用于现代浏览器。它在 IE7 中不起作用。
http://jsfiddle.net/g4dGz/(three divs)
http://jsfiddle.net/g4dGz/1/(two divs)
http://jsfiddle.net/g4dGz/ （div三秒）
http://jsfiddle.net/g4dGz/1/ （二div秒）
CSS:
CSS：
#wrapper {
display: table;
table-layout: fixed;
width:90%;
height:100px;
background-color:Gray;
}
#wrapper div {
display: table-cell;
height:100px;
}
HTML:
HTML：
<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>
<div id="three">three</div>
</div>
回答by pajooh
in modern browsers, you can use flexbox
在现代浏览器中，您可以使用flexbox
three divsexample
三个 div示例
two divsexample
两个 div示例
CSS:
CSS：
#wrapper {
display: flex;
width:90%;
height:100px;
background-color:Gray;
}
#wrapper div {
flex-basis: 100%;
}
HTML:
HTML：
<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>
</div>
回答by Walex996
For the sake of older browser compatibility, here's a solution that works.
为了旧浏览器的兼容性，这里有一个有效的解决方案。
html:
html：
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>
css:
css：
.parent{
height: 200px;
background: #f00;
}
.parent > div{
width: calc(100%/3);
height: 100%;
float: left;
background: #fff;
}
However, to make it dynamic, since you'd know if it'd be 2 or 3 columns, you can put the count in a variable and do internal / inline css:
但是，要使其动态化，因为您知道它是 2 列还是 3 列，您可以将计数放入变量中并执行内部/内联 css：
//$count = 2 or 3
//$count = 2 或 3
Internal CSS (recommended)
内部 CSS（推荐）
...
<style>
.parent > div{
width: calc(100%/<?=$count;?>);
}
</style>
<body>
...
Inline CSS:
内联 CSS：
<div class="parent">
<div style="calc(100%/<?=$count;?>)"></div>
<div style="calc(100%/<?=$count;?>)"></div>
<div style="calc(100%/<?=$count;?>)"></div>
</div>
回答by MatBailie
Have you tried using width:33%?
你试过使用width:33%吗？
回答by kpower
.wrapper > div {
width: 33.3%;
}
This doesn't work in IE <= 6, so you would better add some common class to child divs and create a CSS-rule for it.
这在 IE <= 6 中不起作用，因此您最好向子 div 添加一些公共类并为其创建 CSS 规则。
