如何使元素拉伸到与其中的内容相同的高度?

时间:2010-03-06 01:56:17

标签: html css

标题div的高度不会垂直拉伸以适合其中的内容,除非我指定它的高度或除非我坚持其中一个:

  <div style="clear:both"></div> 
在标题div的结束标记之前。

<style type="text/css">
#header {
    border: 1px solid green;
}
</style>

        <div id="header">
            <span id="logo"><img src="images/logo.png" /></span>
            <span class="fright">something will go here</span>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- header -->

这可以在不使用“清除div”或不将标题div设为固定高度的情况下完成吗?

3 个答案:

答案 0 :(得分:1)

试试这个:

#header { overflow: auto; width: 100%; }

它将清除你的花车而没有额外的元素

答案 1 :(得分:0)

清除会产生影响的唯一原因是如果您使用浮动。你能发布所有CSS吗?

答案 2 :(得分:0)

您可以使用clearfix方法来避免使用清除div。它记录在this site上。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

然后你所要做的就是给div一个.clearfix类。