自动调整高度和嵌套div的小CSS问题

Question

因此，我终于学习了更多的CSS方法，并遇到了一个小问题。我有一个容器div，里面有几个div，其中一个是文本（可以是随机高度）和一个MAX高度为200px的图片。

我在他们后面使用了虚线/彩色背景，需要自动展开到最高的文字或图像的高度。现在，当我使用高度：自动对容器div它适用于随机高度文本的完美：Example Screenshot

但它只是根据文本的高度进行调整;如果图像比文字高，则图像会溢出背景虚线/彩色框的底部。 Example Screenshot

我使用的是目前CSS是这样的：

h1 div#like_detailed { 
    margin: 0; 
    font-size: 1.1em; 
    width: 700px; 
} 

#details-image img { 
    border: none; 
    clear: left; 
    float: right; 
    margin: -45px 0 0 0; 
    max-height: 200px; 
    padding: 0 7px 0 10px; 
} 

#deets-container { 
    background-color: #FEF; 
    border: #190AE7 1px dotted; 
    height: auto; 
    margin-top: 0; 
    margin-bottom: 30px; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-bottom: 0; 
} 

并为它的HTML是这样的：

<div id="deets-container" class="rounded"> 
<!-- Button --> 
<div class="likebtnframe">(some code)</div> 
<!-- Button --> 
<div class="tweetbtnframe">(some code)</div> 
<!-- Button --> 
<ul id="share"> 
<li><a name="share">(some code)</a></li> 
</ul> 
<!-- Submitted By --> 
<div class="submitter_detailed"><span class="submitter-color smalltext">(some code)</span> (some code)</div> 
<!-- Image --> 
<div id="**details-image**">(some code)</div> 
<!-- Like/Quote --> 
<h1 id="**like_detailed**">(some code)</h1> 
</div> 

我有一种感觉，这是很容易的，但我跑花时间自行整理。

有人吗？

Answer 1

问题是你有没有清除您的DIV包含您的浮动图像。最好的解决方案是使用clearfix。

以下内容添加到您的样式表：

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

任何含有浮动元素总是需要当然，除非你设置该元素的固定高度被清除。

现在，从这个改变你的HTML：

<div id="deets-container" class="rounded"> 

这样：

<div id="deets-container" class="rounded clearfix"> 

我希望我帮助。

Answer 2

发生这种情况是因为您正在＃details-image内部浮动img元素。

当一个元素被浮动时，它的包含元素会有效地忽略它，除非它也是浮动的。因此，当你浮动图像时，含有的div不再将其作为其内容的一部分进行计算，因此不包括其高度。

有来处理这一点，我想用一招：

div.anchor { 
    float:none; 
    clear:both; 
    line-height:0; 
    font-size:0; 
} 

现在添加这些锚的div 的一个立即你的img元素之后，并在其中包含非中断空格（一些如果浏览器完全为空，浏览器将不会呈现它）。

<div id="details-image"> 
    (some code) 
    <img src="path/to/your/image.jpg" /> 
    <div class="anchor">&nbsp;</div> 
</div> 

这工作，因为加入了“清”的元素，你强迫它被包含浮动元素，而是通过设置浮动：没有，你这是它的非浮动父承认它，包括它也是如此。 clear属性将清除浮动元素并在其后进行渲染，并且由于行高和字体大小为0，因此不会添加任何额外的高度。我知道这一切听起来很奇怪，但一直都是这样，我在无表格布局中一直使用这种方法，并且有很多浮动div。

参考：这里是从列表中great read相距约CSS花车

Answer 3

浮动“杀死”的高度计算莫名其妙：http://css-tricks.com/all-about-floats/ 解释了为什么（我发现这里对堆栈），并解释锄“清”工作