Question

所以我终于更多地了解了CSS，并遇到了一个小问题。我有一个容器div，里面有几个div，其中一个是一些文本（可以是一个随机高度）和一个MAX高度为200px的图像。

我在它们后面使用虚线/彩色背景，需要自动扩展到最高的文本或图像的高度。现在，当我在容器div上使用height:auto时，它对于随机高度文本非常有用。

但它只是根据文字的高度进行调整;如果图像高于文本，则图像溢出背景点缀/彩色框的底部。

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

这种情况正在发生，因为您将img元素浮动在#details-image内。

当一个元素浮动时，它的包含元素会有效地忽略它，除非它也是浮动的。那么这意味着当您浮动图像时，包含的div不再将其计算为其内容的一部分，因此不会将其包含在其高度中。

有一个技巧可以解决这个问题，我喜欢使用：

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

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

<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。

供参考：这里是来自A List Apart的great read关于CSS Floats

Answer 2

问题是你还没有清除包含浮动图像的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 3

浮动'以某种方式杀死'身高计算：http://css-tricks.com/all-about-floats/ 解释了为什么（我在Stack上找到了这个）并解释了锄头“清晰”的作品

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

3 个答案: