Question

请允许我首先提及我知道如何在正常情况下调整身高。不过我现在面对的是一些棘手的事情，我没有在其他帖子中找到解决方案。

我有一个名为“标题”的div占据页面的整个宽度在div里面有一个叫做“包装”的div。它以保证金为中心在包装机内部，左侧有一个徽标，右侧有一个菜单前两个div（标题和包装）假设根据内容（徽标和菜单）自动调整其高度。为此，我在浮动div之后添加了一个“更清晰”的div。它工作正常，除非我在菜单的li元素中添加了一些填充。在这种情况下，div不会调整。请参阅下面的小提琴中的蓝色李。希望明确并希望有人可以提供帮助。谢谢。

FIDDLE：http://jsfiddle.net/Gynft/

HTML：

  <div id="header">
        <div id="wrapper">
            <div id="logo">
                [ logo ]
            </div>
            <ul id="menu">
                <li><a href="" class="">AGENDA</a></li>
                <li><a href="" class="">MESSAGERIE</a></li>
                <li><a href="" class="">COMMUNAUTEE</a></li>
                <li><a href="" class="">DECONNEXION</a></li>
            </ul>
            <div class="clearer"></div>
        </div>    
    </div>

CSS：

body {
font-family:arial;
font-size:10px;
}

.clearer {
clear:both;
}

#header{
background:yellow;

}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

#logo {
background:purple;
float:left;
}

#menu {
background:orange;
float:right;
}

#menu li {
display:inline;
padding:5px 10px;
background:blue;
}

Answer 1

我无法肯定地说明为什么这会解决您的问题，但将蓝色的display更改为inline-block而不是仅仅内联似乎有效！

Answer 2

嘿Marc很简单，您可以通过overflow:hidden;

获得所需的结果

这是因为你没有清除parent div，而你在floating中使用了child div所以我cleared parent div overflow:hidden; #header, #wrapper { overflow:hidden; } #header{ background:yellow; } #wrapper { background:green; width:560px; margin:20px auto; }现在它按照你的要求工作正常。

我希望你看起来像这样........

<强> CSS

{{1}}

DEMO

Answer 3

试试这个：

#wrapper {
     background: none repeat scroll 0 0 green;
     margin: 20px auto; overflow: hidden;
     width: 560px;
}

Answer 4

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                background:#ededed;
                margin:0 auto;
            }
            .main{
                width:720px;
                border:1px solid red;
                padding:5px;
            }
            .menu-item {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            .menu-item li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul class="menu-item">
                    <li><a href="#">menu item 1</a></li>
                    <li><a href="#">menu item 2</a></li>
                    <li><a href="#">menu item 3</a></li>
                    <li><a href="#">menu item 4</a></li>
                    <li><a href="#">menu item 5</a></li>
                </ul>
       </div>
    </body>
</html>

如何在将填充应用于内部元素时自动调整包装器高度

4 个答案: