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

Question

所以，我终于学会我的办法解决CSS越来越遇到了一个小问题。我有一个div容器，用它内部的几个div的，其中之一是一些文字（可以是随机的高度），这将有200像素一个最大高度的图像。

我使用他们身后虚线/彩色背景需要自动展开的高度为准的是最高的，无论是文字或图像。现在，当我使用height:auto在容器DIV它的工作原理非常适合随机高度文本。

但它根据文本的身高只有调整;如果图像比文字越高，图像溢出的背景点缀/彩色框的底部。

我使用的是目前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

发生这种情况，因为你是漂浮img内的#details-image元素。

当元件是浮动的，其包含的元素有效地忽略它，除非它也浮置。所以，这是什么意思是，当你漂浮你的形象，包含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”的元素，你强迫它被包含浮动元素，而是通过设置float:none，你这是它的非浮动父承认它，包括它。 clear属性会清楚浮动元素和之后呈现，并且由于line-height和font-size是0它不会添加任何额外的高度。我知道这一切听起来很奇怪，但给它一个去，我用这个方法在无表格布局所有的时间有很多浮动的div。

供参考：这里是从列表中除了关于CSS浮动的great read

Answer 3

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