cómo configurar el niño dos div 50%, 50% con el padre div

Question

Tengo el siguiente tipo de patrón. Cómo aplicar un css cambia para la primera y segunda clase de ChildDiv al 50% para el div principal

¿Cómo configuro el 50%, 50% para el div infantil?

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div> 
    <div class="childDiv"> // 50% width 
    </div> 
</div> 

Answer 1

.childDiv{ 
    display:inline-block; 
    width:50%; 
} 

Example

Notas importantes:

1. no deje espacios en blanco entre el divs
2. Es lo mismo que usar flotadores en lugar de display:inline-block;
3. Si los elementos no se alinean en el ejemplo, su navegador no es compatible con box-sizing, simplemente omita el borde (solo para fines ilustrativos).

Answer 2

establezca primero el ancho principal.

.parentDiv 
{ 
width: //insert width of the parentDIV 
} 

Y a continuación, establezca el ancho de childDiv.

Answer 3

Aquí hay un truco, del que debe tener cuidado. Si coloca espacios en blanco entre el cierre del primer div y la apertura del segundo, su 50% no funcionará debido al espacio que se muestra en el navegador.

Hay varias formas de hacerlo. Si está destinada a una audiencia sólo los navegadores modernos (IE9 +, FF, Chrome, Safari), puede utilizar inline-block:

<style> 
    .childDiv { 
     display: inline-block; 
     width: 50%; 
    } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div><div class="childDiv"> // 50% width 
    </div> 
</div> 

Sin embargo, Internet Explorer 7 no soporta inline-block para que pueda ir al método de "la vieja escuela" , utilizando flotadores:

<style> 
    .childDiv { 
     float: left; 
     width: 50%; 
    } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div><div class="childDiv"> // 50% width 
    </div> 
    <div style="clear: both"></div> 
</div> 

Si usted quiere asegurarse de ambas columnas son exactamente la misma anchura y aún así tener un pequeño espacio entre ellos, utilizar diferentes estilos de los flotadores. Tenga en cuenta que este método no requiere que se eliminan los espacios en blanco en su margen de beneficio entre divs, siempre y cuando el ancho que se utiliza es inferior al 50%:

<style> 
    .childDiv { 
     width: 49.5%; 
    } 
    .left { float: left; } 
    .right{ float: right; } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv left"> // 49.5% width 
    </div> 
    <div class="childDiv right"> // 49.5% width 
    </div> 
    <div style="clear: both"></div> 
</div>