come impostare il bambino due div 50%, 50% con il genitore div

Question

Ho il seguente tipo di modello. Come applicare le modifiche css per la prima e la seconda classe childDiv al 50% al div genitore

Come impostare 50%, 50% sul div child?

<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

Note importanti:

1. non lasciare spazi bianchi tra il div
2. Si potrebbe anche usare carri invece di display:inline-block;
3. Se gli elementi non sono allineati nell'esempio, il browser non supporta box-sizing, quindi ometti il ​​bordo (era solo a scopo illustrativo).

Answer 2

imposta prima la larghezza del genitore a qualcosa.

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

E quindi impostare la larghezza di childDiv.

Answer 3

Qui c'è un po 'di trucco, di cui è necessario essere consapevoli. Se inserisci spazi bianchi tra la chiusura del primo div e l'apertura del secondo, il tuo 50% non funzionerà a causa dello spazio visualizzato nel browser.

Ci sono un paio di modi per farlo. Se ci si rivolge solo moderni browser (IE9 +, FF, Chrome, Safari), è possibile utilizzare 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> 

Tuttavia, IE7 non supporta inline-block, in modo da poter passare al metodo "vecchia scuola" , utilizzando carri:

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

Se si vuole garantire entrambe le colonne sono esattamente la stessa larghezza e hanno ancora un piccolo spazio tra di loro, utilizzare diversi stili di carri allegorici. Nota: questo metodo non richiede che si eliminano gli spazi bianchi nel markup tra i div, a patto che la larghezza si utilizza è inferiore 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>