如何计算div高度

Question

我是新来的CSS。当我学习时，我发现了一些令我困惑的东西。

我知道如果我没有设置div的高度，它将决定它包含的内容。

示例代码：

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

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

这里最外面的div'height是最新div.a的高度，这是10px的。

但是当我设置div.a CSS为{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>

高度改变。这取决于div.a的内容事件溢出。

什么是display: inline-block效果。

Answer 1

我认为你的问题在这里是给它一个特定的高度和溢出的内容的组合。

我在这里做了一些例子，可能有所帮助。

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 */ 
}