4

我对 HTML 渲染的基础有疑问。我有以下 HTML/CSS。

http://jsfiddle.net/cgZ4C/2/

<style type="text/css">
.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
}

.content
{
    float:left;
    width:196px;
    min-height:20px;
    background-color:#BABABA;
    margin:2px;
}
</style>

<div class="outer">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>

<div>

当内部内容增长时，为什么外部 div 没有增长？即使我尝试在 .content div 中添加一些文本。但是 .outer div 仍然没有增长？

4

6 回答 6

5

您需要将溢出属性添加到您的外部 div 并为其分配适当的值，例如

overflow:hidden

在这里找到最适合您的需求

这是您可能需要的代码更改：

.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
    overflow:hidden;
}
于 2013-08-14T13:26:03.903 回答
1

清除您的浮动！总是 ：-）

overflow:auto;在此代码中添加：http: //jsfiddle.net/cgZ4C/3/

现在很多 CSS 框架都使用了clearfix 类。这已经成为事实上的标准。Twitter bootstrap 也使用它。我们需要做的只是在外部 div 中添加一个类 clearfix 就可以了 :)

于 2013-08-14T13:26:45.133 回答
0

它不会增长，因为您在父级中的所有内容都是浮动的。当一个元素浮动时，父级在计算它的总大小时不再考虑它。由于每个元素都是浮动的，就父元素而言，没有内容，所以它不会调整大小。

于 2013-08-14T13:26:48.047 回答
0

您的代码看起来像一个表格，因此使用display:table( source ) 元素的行为就像一个表格元素。

http://jsfiddle.net/eWwtp/

.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
    display:table 

}

另一种解决方案，可以避免这些问题：

但是overflow hidden，如果 div 之外的项目被隐藏或切断（通常使用菜单等），则可能会出现更多问题。

http://jsfiddle.net/4LqaK/

添加：

<div class="clear"></div>

.clear{clear:both}
于 2013-08-14T13:29:15.057 回答
0

尽管清除浮动是正确的方法，但有时，还有另一种方法可以做到这一点：

也浮动你的外部 div ！！！

.outer {
  float: left;
}

这样，外部将尊重浮动的子级并扩展，但您也需要浮动外部的父 div，依此类推，直到遇到一个祖先 div 被清除/<body>遇到。

所有的浮动都像兄弟一样，所以比非浮动非清除 div 更好地相互配合。

:)

于 2013-08-14T13:32:13.140 回答
0

添加属性溢出：隐藏到 .outer 样式。

于 2013-08-14T13:38:01.287 回答