Question

我有以下div，但根据内容不会增加。

<div style="width:250px;border-radius:4px; background:#374953;padding:10px; font-weight:200; clear:both"> <img src="http://li.zoocdn.com/6ac9972d726687d35e8e1c25d2d0a23beaa2ea43_150_113.jpg" width="80" style="float:left; margin-right:10px;" />
  <h2 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; margin-top:0px; font-weight:200">2 Bedroom Property For Sale</h2>
  <h3 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; margin-top:0px; margin-bottom:0px; font-weight:200">&pound;1,234,567</h3>
</div>

我添加了明确的内容：两者都是容器div，但没有变化。

这是一个小提琴：http://jsfiddle.net/CFwmh/

Answer 1

您的问题是img内有浮动div，浮动元素不会影响其容器的尺寸（正如您可能预期的那样）。

通过设置包含div的<{3}}来解决问题：

overflow: hidden;

`overflow`

另外，请考虑停止使用内联样式并使用jsFiddle Demo个文件。

Answer 2

使用

<div style="clear:both"></div>

在最后一个div结束之前

<div style="width:250px;border-radius:4px; background:#374953;padding:10px; font-weight:200; clear:both"> <img src="http://li.zoocdn.com/6ac9972d726687d35e8e1c25d2d0a23beaa2ea43_150_113.jpg" width="80" style="float:left; margin-right:10px;" />
      <h2 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; margin-top:0px; font-weight:200">2 Bedroom Property For Sale</h2>
      <h3 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; margin-top:0px; margin-bottom:0px; font-weight:200">&pound;1,234,567</h3>
    <div style="clear:both"></div>
    </div>

Answer 3

您遇到的情况称为“clearfix问题”。大多数浏览器在计算elemnts高度时都不会考虑浮动孩子。

有很多关于此的信息。这可能是一个很好的起点：What is a clearfix?

在您的情况下，您可以通过两种方式解决此问题。

方法1：
在你的div中添加一个非浮动elemnt作为最后一个孩子，并给它一个样式clear: both;这样的东西：

<div> 
  <img/>
  <h2>2 Bedroom Property For Sale</h2>
  <h3>&pound;1,234,567</h3>
  <div style='clear:both;'></div>
</div>

这种方法的缺点是你实际上是在添加标记，仅仅是为了造型，这被认为是不好的做法。这就是为什么我会采用方法2。

方法2：
使父div自我清除。这可以通过按照建议添加overflow:hidden;来完成，但是我会产生不需要的结果。有些情况下你可能想要溢出，但仍想清除div。这就是我在标准样式表中有clearfix类的原因。它看起来像这样：

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

你只需要将它应用于div：

    <div class='clearfix'> 
      <img/>
      <h2>2 Bedroom Property For Sale</h2>
      <h3>&pound;1,234,567</h3>
    </div>

这只是一个clearfix类的例子，有很多不同的类。然而，这个似乎对我来说很好。

展示两种技术的示例：http://jsfiddle.net/LGvgj/

Answer 4

这是因为你有漂浮物品。 clear最后一项。

DEMO http://jsfiddle.net/kevinPHPkevin/CFwmh/2/

在这种情况下，它是h3

h3 {
    clear: both;
}

根据内容增加div的高度

4 个答案:

`overflow`