0

我遇到了一个问题，我想让包装器的高度根据徽标的高度展开。我知道谷歌有很多这样的问题，但没有一个真正适合我。

我试过 height: auto !important 方法。

我也尝试过 min-height 并且它在大多数情况下都有效，但是当我将高度设置为 auto 时它对我不起作用。

这是我的CSS：

.header {  
width: 100%; 
height: auto;
min-height: 80px; 
position: relative;
background: red; }

.logo { float: left; border: 0; }

HTML：

<div class="header">
  <img src="logo.png" class="logo"/>
  <br class="clear" />
</div>

请注意，我也试过没有浮动。如果这个问题很容易解决，我提前道歉。我做了我的研究，但没有一个对我有用，或者我发现的任何人都处于我的境地。我会很感激一些帮助。谢谢 ！

4

2 回答 2

3

由于你的 logo 是 float:left，你需要使用所谓的 clearfix，所有使用 hight 或 min-height 的操作都是错误的方式。clearfix 有很多种。既然你有<br class="clear" />，你只需要添加.clear { clear: both; }到你的样式表，但这不是最好的方法。这是更好的一个：

CSS：

.header {  
    width: 100%; 
    background: red; 
}

.logo { 
    float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

http://www.webtoolkit.info/css-clearfix.html

HTML：

<div class="header clearfix">
  <img src="logo.png" class="logo" />
</div>

您可以在此处查看工作示例：http: //jsfiddle.net/ZCXVr/1/ PS 提供标题overflow: hidden也是一种方法，但我不建议使用它

于 2012-12-28T00:23:40.080 回答
2

尝试给出标题overflow: hidden

于 2012-12-27T21:18:05.880 回答