0

我有以下 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>

我已将 clear:both 添加到容器 div 但没有更改。

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

4

4 回答 4

3

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

overflow通过设置包含 div 的问题解决了：

overflow: hidden;

jsFiddle 演示

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

于 2013-08-30T19:27:23.887 回答
0

您遇到的问题被称为“clearfix 问题”。大多数浏览器在计算元素高度时不会考虑浮动子元素。

有很多关于这方面的信息。这可能是一个很好的起点：什么是 clearfix？

就您而言，您可以通过两种方式解决此问题。

方法 1：
将一个非浮动元素作为最后一个子元素添加到您的 div 中，并赋予其样式clear: both;如下：

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

这种方法的缺点是您实际上是在添加标记，只是为了造型，这被认为是不好的做法。这就是为什么我会选择方法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/

于 2013-08-30T19:43:19.993 回答
0

这是因为你有浮动项目。clear最后一项。

演示http://jsfiddle.net/kevinPHPkevin/CFwmh/2/

在这种情况下h3

h3 {
    clear: both;
}
于 2013-08-30T19:53:38.307 回答
0

利用

<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>
于 2013-08-30T19:28:04.377 回答