CSS并排div的自动等宽

Question

<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.我希望子div自动采用相等的宽度.

谢谢

Answer 1

这不是不可能的.使用时,它甚至不是特别难display: table.

此解决方案适用于现代浏览器.它不适用于IE7.

http://jsfiddle.net/g4dGz/ (三个divs)
http://jsfiddle.net/g4dGz/1/ (两个divs)

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>