Question

我是css的新手。在我学习的过程中，我找到了令我困惑的东西。

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

示例代码：

   <div class="parent">
       <div class="box"> Box One</div>
       <div class="box"> Box two</div>
       <div class="box"> Box three</div>
       <div class="box"> Box four</div>
       <div class="box"> Box five</div>
       <div class="box"> Box six</div>
   </div>

    <style>
        .parent {
               min-height: 300px;
               width: 100%; 
               background-color: blue;
           }
         .box {
               width: 50%;
               height: 50px;
               color white;
           }
    </style>

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

这里最外面的div'高度达到div.a的高度，即10px。

但是当我将<div> <div class="a"> 123<br/> 123<br/> 123<br/> </div> </div> css设为{div.a;}

时

display: inline-block

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

高度发生了变化。它取决于div.a的内容事件溢出。

<div> <div class="a"> 123<br/> 123<br/> 123<br/> </div> </div>效果是什么。

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

如何计算div高度

1 个答案: