0

我有以下 css 和 html 文件：

body{
    text-align: center;
    background-color: #eeeeee;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: Helvetica,Arial,sans-serif;
}
#wrapper{
    margin: 0 auto;
    width:900px;
    border: 1px solid #cccccc;
    background-color:#ffffff;
    padding:5px;
}
#banner{
    width:900px;
    height: 150px; 
    background-image: url("../images/logo.png");
    background-repeat: no-repeat; 
}
#separator{
    width:100%;
    height: 5px;
    border: 1px solid #993311;
    background-color: #993300;
}
#navbar{
    height:25px;
    width: 100%;
    background-color: #434a4f; 
}
#topsearch{
    height:25px;
    width: 100%;
    background-color: #434a4f; 
}
#breadcrumb{
    float:left;
    width: 30%;
    background-color: #cccccc;
}
#search{
    float:left;
    width:70%;
    background-color: #fccfcf;
}
#main{
    clear: both;
}
#mainleft{
    float:left;
    width: 21%;
    background-color: #ff0000;

}
#maincenter{
    float:left;
    width: 58%;
    background-color: #00ff00;
}
#mainright{
    float:left;
    width: 21%;
    background-color: #0000ff;
}
#mainright1{
    width: 100%;
    height:20%;
    background-color: #0000ff;
}
#mainright2{
    clear:both;
    width:100%;
    height: 21%;
    background-color: #0000ff;
}
#footer{
    clear: :both;
    width: :100%;
    background-color: #333333;
}

和

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>test</title>
        <meta name="description" content="" />
        <meta name="generator" content="Studio 3 http://aptana.com/" />
        <meta name="author" content="byteslash" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <link href="css/template.css" type="text/css" rel="stylesheet"/>
    </head>
        <body>

        <div id="wrapper">
            <div id="banner"></div>
            <div id="separator"></div>
            <div id="navbar">
                NavBar
            </div>
            <div id="topsearch">
                <div id="breadcrumb">Breadcrumb</div>
                <div id="search">SearchBox</div>
            </div>

            <div id="main">
                <div id="mainleft">
                    MainLeft
                </div>
                <div id="maincenter">
                    MainCenter
                </div>
                <div id="mainright">
                    <div id="mainright1">MainRight1</div>
                    <div id="mainright2">MainRight2</div>
                </div>              
            </div>
            <div id="footer">
                <h6>Footer</h6>
            </div>
        </div>
    </body>
</html>

如果您检查颜色，我的 mainright2 在 mainright1 顶部显示为蓝色，这是有意的，但 mainright2 挂在页脚顶部。

我认为解决这个问题的一种方法是以某种方式使 div 主要解释其子项内部定义的所有高度，但我不知道如何。

4

3 回答 3

1

发生这种情况是因为您的#maindiv 的高度为 0px - 它的所有内容都是floating。有很多方法可以解决这个问题，其中之一就是应用overflow: hidden到#maindiv 上，像这样：

#main{
    overflow: hidden;
    clear: both;
}
于 2012-04-26T12:22:01.550 回答
1

你的风格有误#footer

clear: :both;

删除第二个冒号。

编辑：还有另一个，但那个没有那么糟糕，因为默认情况下 div 的宽度为 100%。

于 2012-04-26T12:25:30.630 回答
0

<div style="clear:both;"></div>在页脚和主容器之间添加。

于 2012-04-26T12:19:09.273 回答