1

当它的内部内容（如，其他s等）发生变化时，我有一个div不改变它的高度的问题，它没有在CSS中设置。uldiv

我的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; 
}

演示在这里

4

2 回答 2

2

添加overflow: auto;到#main_wrapper.

于 2013-09-26T19:32:36.620 回答
1

之所以div没有采用其内部元素的高度，与显示浮动元素的怪癖有关。#navigation在带有clear: both;样式的元素之后添加一个空元素将导致#main_wrapper适合浮动元素的高度。

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

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

于 2013-09-26T19:38:26.357 回答