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时，它甚至不是特别难。

现代浏览器中的此解决方案will work。它在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>

Answer 2

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

three divs示例

two divs示例

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

这是一个有效的解决方案。

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

Answer 5

.wrapper > div {
  width: 33.3%;
}

这在IE＆lt; = 6中不起作用，所以你最好为子div添加一些公共类并为它创建一个CSS规则。

CSS并排div的自动等宽

5 个答案: