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>

我有一个包含 2 或 3 个子 div 的父 div。我希望子 div 自动采用相等的宽度。

谢谢你

原文由 Faizal Balsania 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这并非不可能。使用 display: table 甚至不是特别难。

该解决方案 适用 于现代浏览器。它不会在 IE7 中工作。

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

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

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>

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 pajooh 发布，翻译遵循 CC BY-SA 4.0 许可协议