html - 简单的 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 div 中添加一些文本。但是 .outer div 仍然没有增长吗？

Answer 1

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

overflow:hidden

找到最适合您需要的东西 here

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

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