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がフッターの上にぶら下がっています。

それを解決する1つの方法は、どういうわけかdivをその子の内部で定義されたすべての高さのメインアカウントにすることだと思いますが、方法がわかりません。

4

3 に答える 3

1

これは、#maindiv の高さが 0px であるために発生しています。その内容はすべてfloating です。これを解決するには多くの方法があり、そのうちの 1 つは次のように divに適用overflow: hiddenすることです。#main

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

スタイルに誤りがあります#footer

clear: :both;

2 番目のコロンを削除します。

編集：もう1つですが、divの幅はデフォルトで100％であるため、それほど悪くはありません。

于 2012-04-26T12:25:30.630 に答える
0

<div style="clear:both;"></div>フッターとメイン コンテナーの間に追加します。

于 2012-04-26T12:19:09.273 に答える