Div nicht füllt die 50% des Behälters

Question

Ich brauche ein div mit zwei weiteren divs zu füllen und diese divs hat die 50% der Eltern div zu füllen, aber das Kind divs füllt nur den Inhalt.

.uno { 
 
    background-color: blue; 
 
    width: 50%; 
 
    display: inline; 
 
} 
 

 
.dos { 
 
    background-color: green; 
 
    width: 50%; 
 
    display: inline; 
 
} 
 

 
.super { 
 
    width: 100%; 
 
}

<div class="super"> 
 
    <div class="uno"> 
 
    aaaaaa 
 
    </div> 
 
    <div class="dos"> 
 
    bbbbb 
 
    </div> 
 
</div>

Answer 1

Try this: put float: left und display: block wie unten

.uno{ 
 
    background-color: blue; 
 
    width: 50%; 
 
    float:left; 
 
    display:block; 
 
} 
 
.dos{ 
 
    background-color: green; 
 
    width: 50%; 
 
    float:left; 
 
    display:block; 
 

 
} 
 
.super{ 
 
    width: 100%; 
 
}

<div class="super"> 
 
     <div class="uno"> 
 
     aaaaaa 
 
     </div> 
 
     <div class="dos"> 
 
     bbbbb 
 
     </div> 
 
    </div>

Answer 2

Sie benötigen float:left Eigenschaften hinzufügen gezeigt. Bitte überprüfen Sie dies:

.uno{ 
 
    background-color: blue; 
 
    width: 50%; 
 
    float:left; 
 
} 
 
.dos{ 
 
    background-color: green; 
 
    width: 50%; 
 
    float:left; 
 
} 
 
.super{ 
 
    width: 100%; 
 
}

<div class="super"> 
 
     <div class="uno"> 
 
     aaaaaa 
 
     </div> 
 
     <div class="dos"> 
 
     bbbbb 
 
     </div> 
 
    </div>

Answer 3

Wie schon vorher gesagt - versuchen 'display' Elemente von Kindern 'Block' zu ändern, und fügen Sie 'schweben': 'links' in CSS. Aber Sie werden das Problem haben - Eltern werden sich verhalten, als ob sie keine Kinder hat. Einfachste Weg, um es zu beheben - add ‚Überlauf‘: ‚versteckt‘

Answer 4

@AFS .Super, wenn Sie float verwenden, Sie Eltern Höhe verlieren. Lösung mit Flex.

.uno{ 
 
    background-color: blue; 
 
    width: 50%; 
 
} 
 
.dos{ 
 
    background-color: green; 
 
    width: 50%; 
 
} 
 
.super{ 
 
    width: 100%; 
 
    display: flex; 
 
}

<div class="super"> 
 
     <div class="uno"> 
 
     aaaaaa 
 
     </div> 
 
     <div class="dos"> 
 
     bbbbb 
 
     </div> 
 
    </div>