请帮助我,我无法理解我的简单代码的结果:

<div id="wrapper-top">
    <div class="wrapper">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">text</div>
            <div class="block-3-1">text</div>
            <div class="block-3-2">text</div>
            <div class="block-3-3">text</div>
        </div>
    </div>
</div>


和CSS文件:

#wrapper-top
{
    width: 100%;
    background-color: gray;
}
.wrapper
{
    margin: 0 150px 0 150px;
}
#logo
{
    width: 100%;
    height: 50px;
}
#menu
{
    width: 100%;
    height: 50px;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}


为什么div .block-3-1,.block-3-2和.block-3-3似乎不在div .wrapper之外。


我不希望那样,因为我希望在.wrapper中包含此块。

http://jsfiddle.net/4yvLv853/1/

最佳答案

您需要将浮动项目包含在#content div中

一种方法(here还有其他方法)是使用overflow:hidden

#content
{
    width: 100%;
    background-color: white;
    overflow: hidden;
}


JSfiddle Demo

关于html - CSS背景小于div高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30649158/

10-13 02:46
查看更多