Question

我有以下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主要帐户在其子项内定义所有高度，但我不知道如何。

Answer 1

这是因为你的#main div的高度为0px - 所有内容都是float。有很多方法可以解决这个问题，其中一种方法是将overflow: hidden应用于#main div，就像那样：

#main{
    overflow: hidden;
    clear: both;
}

Answer 2

#footer

的样式出错

clear: :both;

删除第二个冒号。

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

Answer 3

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

如何删除一个悬垂的div

3 个答案: