元素在css中的高度

-1

我在理解div中元素高度的问题。我有一个标题div，里面有一些div。div里面占有一定的高度。当头部未被提及时，头部是否应该覆盖由其内部定义的元素占据的区域。根据我的理解，头文件应该将所有的div包裹在里面。元素在css中的高度

如果我错了，请纠正我。

这是我的身体

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

来源

2015-02-23 Chelsea

http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase – 2015-02-23 06:14:22

当您已漂浮任何其他DIV中的DIV，然后高度不会自动为外DIV计算，使其你应该增加显示：inline-block的或显示：表根据您的布局外部DIV。

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

入住这https://jsfiddle.net/vmq3y2rv/1/

来源

2015-02-23 06:15:22 PRAH

防止影响外层的属性div，你可以使用'#outer_div：after {content：'';显示：表格;明确：两者;}' – Ejaz 2015-02-23 06:18:47

是的，这是事实，但是当所有的元素都在头内浮动合拢。

.clearfix{ 
    clear:both; 
}

然后在您的标题头以一个clearfix类结束之前插入一个div。

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

来源

2015-02-23 06:19:26 Enjayy

您可以使用浮动：左或显示：inline-block的/表，它会根据你的要求和布局。

来源

2015-02-23 07:22:06

元素在css中的高度

回答

相关问题