CSS并排div的自动等宽

<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> 

我有一个父母的div将包含2或3个子div。 我想要孩子divs自动等宽。

谢谢

Answer 1

这不是不可能的。 使用display: table并不是特别困难。

该解决scheme将在现代浏览器中运行。 它不会在IE7中工作。

http://jsfiddle.net/g4dGz/ （三个div ）
http://jsfiddle.net/g4dGz/1/ （两个div ）

CSS：

 #wrapper { display: table; table-layout: fixed; width:90%; height:100px; background-color:Gray; } #wrapper div { display: table-cell; height:100px; } 

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> 

Answer 2

在现代浏览器中，您可以使用flexbox

三个div例子

两个div例子

CSS：

 #wrapper { display: flex; width:90%; height:100px; background-color:Gray; } #wrapper div { flex-basis: 100%; } 

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> 

Answer 3

你有没有尝试过使用width:33% ？

Answer 4

 .wrapper > div { width: 33.3%; } 

这在IE6中不起作用，所以你最好在子div中添加一些常用的类，并为它创build一个CSS规则。

Answer 5

这是一个可行的解决scheme。

HTML：

 <div id="parent"> <div></div> <div></div> <div></div> </div> 

CSS：

 #parent{ height: 200px; background: #f00; } #parent > div{ width: calc(100%/3); height: 100%; background: #fff; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #parent > div:nth-child(1){ border-right: 30px solid #f00; } #parent > div:nth-child(2){ border-right: 15px solid #f00; border-left: 15px solid #f00; } #parent > div:nth-child(3){ border-left: 30px solid #f00; }