Question

我在理解div中元素的高度时遇到了问题。我有一个标题div，里面有一定的div。里面的div占据一定的高度。当没有提到高度时，不应该将标题覆盖在其内部定义的元素占据的区域。根据我的理解，标题应该包含在其中的所有div。

如果我错了，请纠正我。

这是我的身体

   <div style=" float:left; background-color:pink; width:20%; height:40px; ">
      THis is left
   </div>

   <div style=" float:left; background-color:gray; width:70%; height:40px; " >

        <div id="htop">
             This is top      
         </div>

       <div id="hbutt" >
          this is buttom
       </div>

  </div>

这就是风格

  #cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px;  }

  #header{ background-color:red; width:100%; padding:5px;  }

  #cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both;  }

  #htop{ background-color:maroon; }

  #hbutt{  background-color:purple; }

对于输出和可能的更改需要https://jsfiddle.net/sum1/vmq3y2rv/

Answer 1

如果你在其他任何DIV中都有浮动DIV，那么外部DIV不会自动计算高度，为此你应该添加 display：inline-block 或 display：table 到外部DIV，具体取决于您的布局。

 #header {
      background-color:red;
      width:100%;
      padding:5px;
    display:inline-block;
  }

选中此https://jsfiddle.net/vmq3y2rv/1/

Answer 2

是的，这是真的，但当所有元素浮动在标题内部时，它会崩溃。

.clearfix{
    clear:both;
 }

然后在标题结束前用一个clearfix类插入一个div。

Jsfiddle在这里 https://jsfiddle.net/kriscoulson/vmq3y2rv/2/

Answer 3

您可以使用 float：left 或 display：inline-block / table ，它将基于您的要求和布局。

元素在css中的高度

3 个答案: