Auto-side CSS divide di uguale larghezza

Ho un genitore div che conterrà 2 o 3 div per bambini. Voglio che le div alunne prendano automaticamente le stesse larghezze.

Grazie

Non è imansible. Non è nemmeno particolarmente difficile, con l’uso del display: table .

Questa soluzione funzionerà con i browser moderni. Non funzionerà in IE7.

http://jsfiddle.net/g4dGz/ (tre div s)
http://jsfiddle.net/g4dGz/1/ (due div s)

CSS:

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

HTML:

 
one one one one one one one one one one one one one one one one one one one one one
two two two two two two
three

nei browser moderni, è ansible utilizzare flexbox

esempio di tre div

esempio di due immersioni

CSS:

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

HTML:

 
one one one one one one one one one one one one one one one one one one one one one
two two two two two two

Hai provato a usare la width:33% ?

Ecco una soluzione che funziona.

html:

 

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; } 
 .wrapper > div { width: 33.3%; } 

Questo non funziona in IE <= 6, quindi è meglio aggiungere alcune classi comuni a div figlio e creare una regola CSS per questo.