简单的HTML呈现问题

Question

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

Answer 1

您需要将overflow属性添加到外部div并为其分配适当的值

overflow:hidden

发现什么是最适合你的需要在这里

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

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