Question

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

<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 divs中添加一些文本。但是.outer div还没有增长吗？

Answer 1

您需要将overflow属性添加到外部div并为其指定适当的值，如

overflow:hidden

找出最适合您需求的内容here

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

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

Answer 2

清除你的浮子！总是： - ）

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

如今，许多CSS框架都使用类clearfix 。这已成为事实上的标准。 Twitter引导程序也使用它。我们需要做的只是在外部div中添加一个类clearfix，你将完成：）

Answer 3

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

Answer 4

您的代码看起来像一个表，因此，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 

}

另一个solution，可以避免这些问题：

但是对于overflow hidden，如果隐藏或关闭该div之外的项目（通常使用菜单等），可能会出现更多问题。

http://jsfiddle.net/4LqaK/

添加：

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

.clear{clear:both}

Answer 5

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

浮动你的外部div !!!

.outer {
  float: left;
}

这样，外部会尊重浮动的子项并扩展，但是你也需要浮动外部的父div，依此类推，直到有一个清除的祖先div / <body>为遇到。

所有花车都像兄弟一样，所以与非浮动的非清除div相比，它们相互更好。

：）

Answer 6

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

简单的HTML呈现问题

6 个答案:

浮动你的外部div !!!