根据父div中的子div更改父div的大小

时间:2013-09-26 19:29:48

标签: html css

我有一个问题div没有改变它的高度,当它的内部内容(如ul,其他div等)发生变化时,它没有在CSS中设置。

我的HTML代码:

<div id="main_wrapper"> 
    <div id="navigation"> 
        <ul>
            <li><a href="#"> link one </a></li> 
            <li><a href="#"> link two </a></li> 
            <li><a href="#"> link three </a></li> 
            <li><a href="#"> link four </a></li> 
        </ul> 
    </div> 
</div> 

我的css代码:

#main_wrapper { 
  display: block;
  border:1px solid black; 
} 
#navigation { 
  background-color: rgba(0, 0, 0, 0.4); 
  position: relative;  
  padding: 8px; 
  float: right; 
} 

demo here

2 个答案:

答案 0 :(得分:2)

overflow: auto;添加到#main_wrapper

答案 1 :(得分:1)

div未获取其中元素高度的原因与显示浮动元素的怪癖有关。在#navigation元素之后添加空元素并将clear: both;作为样式将导致#main_wrapper符合浮动元素的高度。

或者,您可以将display: inline-block;添加到包装器div,但您还必须指定宽度(width: 100%;)。使用clearfix是首选解决方案。

演示: http://jsfiddle.net/NXNDV/4/