How to compute div Höhe

Question

Ich bin neu in CSS. Als ich lernte, habe ich etwas gefunden, das mich verwirrt hat.

Ich weiß, wenn ich nicht die Höhe von div festlegen, wird es entscheiden, was es enthält.

Beispielcode:

div { 
 
    border: solid red; 
 
} 
 
div.a { 
 
    border: solid green; 
 
    height: 10px; 
 
}

<div> 
 
    <div class="a"> 
 
    123<br/> 
 
    123<br/> 
 
    123<br/> 
 
    </div> 
 
</div>

Hier Äußerste div'height ist up-to div.a die Höhe, die 10px ist.

Aber wenn ich gesetzt div.a CSS als {display: inline-block;}

div { 
 
    border: solid red; 
 
} 
 
div.a { 
 
    border: solid green; 
 
    height: 10px; 
 
    display: inline-block 
 
}

<div> 
 
    <div class="a"> 
 
    123<br/> 
 
    123<br/> 
 
    123<br/> 
 
    </div> 
 
</div>

Die Höhe verändert. Es liegt an dem Inhaltsereignis von div.a, dass es überläuft.

Was ist der display: inline-block Effekt.

Answer 1

Ich denke, Ihr Problem hier ist die Kombination von geben Sie eine bestimmte Höhe und den überlaufenden Inhalt.

Ich habe hier einige Beispiele gemacht, die helfen könnten.

DEMO https://jsfiddle.net/r6n12325/:

HTML:

<div class="box1"> 
    <div class="box2"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

<hr> 

<div class="box3"> 
    <div class="box4"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

<hr> 

<div class="box5"> 
    <div class="box6"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

CSS:

.box1 { 
    border:1px solid #333; 
} 
.box2 { 
    border:1px solid red; 
} 

.box3 { 
    border:1px solid #333; 
} 
.box4 { 
    height: 10px; 
    display:inline-block; 
    border:1px solid red; 
} 

.box5 { 
    border:1px solid #333; 
} 
.box6 { 
    height: 10px; 
    display:inline-block; 
    border:1px solid red; 
    overflow:auto; /* could also use hidden */ 
}