CSS lado a lado anchos iguales del 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> 

Tengo un div principal que contendrá 2 o 3 divs secundarios. Quiero que los divs hijos tomen el mismo ancho automáticamente.

Gracias

Answer 1

No es imposible. Ni siquiera es particularmente difícil, con el uso de display: table.

Esta solución will work en los navegadores modernos. No funcionará en IE7.

http://jsfiddle.net/g4dGz/(tres div s)
http://jsfiddle.net/g4dGz/1/(dos 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

¿Ha intentado utilizar width:33%?

Answer 3

.wrapper > div { 
    width: 33.3%; 
} 

Esto no funciona en IE < = 6, por lo que añadiría mejor algunos de clase común a divs niño y crear una regla CSS para ello.

Answer 4

en los navegadores modernos, puede utilizar flexbox

three divs ejemplo

two divs ejemplo

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 5

Aquí hay una solución que funciona.

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