0

div と混同している Web サイトを設計しています。

<div id="header_wrapper">
    <div class="header">
        <div class="logo">
            <img src="css/images/logo-dark.png" alt="Mint Bite" />
        </div>

    </div>    
</div>

<div id="menu_wrapper">
    <div class="menu">
        <ul>
            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>    
        </ul>    
    </div>
</div>

そしてCSS：

body
{
    margin:0;
    padding:0;
}
html
{
    background:#d2d1d0;
    margin:0;
    padding:0;
}
#header_wrapper
{
    background:#232323;

}
.header
{
    width:950px;
    margin:0 auto;
}
.logo
{
    width:300px;
    float:left;
}
#menu_wrapper
{
    overflow:auto;
    background:#333333;
    margin:0;
    padding:0;

}
.menu
{
    width:950px;
    margin:0 auto;
}

.menu ul
{
    width:550px;
    margin-left:200px;
}
.menu li
{
    float:left;
    padding:4px;
}
.menu li a
{
    color:#FFFFFF;
}

しかし、結果を取得しmenuた後headerに表示する代わりに、下の画像のようなものを表示します。どういう理由ですか？ここに画像の説明を入力

4

2 に答える 2

1

ヘッダーラッパーdivの後に1行追加します。

<style>

.clearFix
{
clear:both;
}
</style>

ヘッダーラッパーの後にこのdivを追加します

<div class="clearFix"></div>
于 2012-12-08T07:34:13.113 に答える
0 
<html>
<head>
    <style>
        #mainContainer
        {
            width:960px;
            margin:0 auto;
        }
        #header_wrapper
        {
            background: #232323;

        }
        .header
        {
            width: 950px;
            height:100px;

        }
        .logo
        {
            width: 300px;
            float: left;
        }
        #menu_wrapper
        {
            width:100%;
            background: #333333;
            margin: 0;
            padding: 0;
            overflow:auto;
        }
        .menu
        {
            width: 950px;
            margin: 0 auto;
        }

        .menu ul
        {
            width: 550px;
            margin-left: 200px;
        }
        .menu li
        {
            float: left;
            padding: 4px;
        }
        .menu li a
        {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="header_wrapper">
            <div class="header">
                <div class="logo">
                    <img src="css/images/logo-dark.png" alt="Mint Bite" />
                </div>
            </div>
        </div>
        <div id="menu_wrapper">
            <div class="menu">
                <ul>
                    <li><a href="">HOME</a> </li>
                    <li><a href="">HOME</a> </li>
                    <li><a href="">HOME</a> </li>
                    <li><a href="">HOME</a> </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
于 2012-12-08T07:42:55.727 に答える