wie das Kind zwei div 50%, 50% mit dem Elternteil div

Question

Ich habe folgende Art von Muster. Wie man eine CSS anwendet, ändert sich für die erste und zweite childDiv-Klasse auf 50% zum übergeordneten div

Wie stelle ich 50%, 50% auf das Kind div ein?

<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

Wichtige Hinweise:

1. nicht Leerzeichen zwischen den divs verlassen
2. Sie könnten auch Schwimmer anstelle von display:inline-block;
3. Wenn die Elemente im Beispiel nicht ausgerichtet sind, unterstützt Ihr Browser box-sizing nicht, lassen Sie den Rahmen einfach weg (nur zur Veranschaulichung).

Answer 2

Stellen Sie die Elternbreite zuerst auf etwas ein.

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

Und dann hinterher setzen Sie die childDiv Breite.

Answer 3

Hier ist ein kleiner Trick, den Sie beachten sollten. Wenn Sie zwischen dem Schließen des ersten Div und dem Öffnen des zweiten Divisors Leerzeichen einfügen, funktionieren Ihre 50% nicht, da der Space im Browser angezeigt wird.

Es gibt mehrere Möglichkeiten, dies zu tun. Wenn Sie nur modernen Browser (Internet Explorer 9 +, FF, Chrome, Safari) sind Targeting, können Sie inline-block verwenden:

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

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

jedoch IE7 nicht inline-block nicht unterstützt, so können Sie auf die „alte Schule“ Methode gehen , mit Schwimmern:

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

Wenn Sie beiden Spalten sicherstellen wollen, sind genau die gleiche Breite und haben immer noch einen kleinen Spalt zwischen ihnen, verwenden verschiedene Arten von Schwimmern. Beachten Sie diese Methode nicht erfordert, dass Sie Leerzeichen in Ihrem Markup zwischen divs beseitigen, solange die Breite, die Sie verwenden, ist weniger als 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>