html - 如何计算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的高度是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

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

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

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