0

子が中央に配置され、下部に配置される div タグ内に div タグを挿入しようとしています。(スタック オーバーフローの解決策をいくつか試しましたが、成功しませんでした)。次のcssおよびhtmlの例では、問題が発生しています

    body{
    margin:0;
    font-family:Georgia,Times,serif !important;
    font-size:12pt;
    background:white;
}

    #header{
        height: 60px;
        width: 100%;
        border: 1px solid black;
    }
    #navWrap{
        background:white;
        bottom: 0;
        font-size: 12pt;
        height: 40px;
        border: 1px solid black;
        margin: 0px auto;
        width: 960px;
    }


    #contentWrapper{
        width:960px;
        padding: 0;
        margin:15px auto 10px auto;
    }

    #content{
        padding: 20px 10px 10px 10px;
        height:100%;
        background:#fff;
        border: 1px solid black;
    }

    #footer {
        width:100%;
        height:260px;
        margin:0 auto;
        padding: 20px 10px 10px 10px;
        border: 1px solid black;
        bottom:0;
    }
    #copyright{
        width:100%;
        height:60px;
        bottom:0;
        margin: 0 auto;
        border: 1px solid black;
    }
<body>
    <div id="header">
        <div id="navWrap">
            This is navigation box.
        </div>
    </div>
    <div id="contentWrapper">
        <div id="content">
            This is a container
        </div>
    </div>
    <div id="footer">
        This is a footer.
    </div>
    <div id="copyright">
        This is a copyright.
    </div>
</body>

下部のヘッダー位置内にナビゲーション (navWrap) が必要です。どうすればこれを達成できますか?

4

2 に答える 2

0

#headerまず、相対を配置し、次に#navWrap絶対を配置する必要があります。

次に、要素を絶対に配置#navWrapしているため、コンテキストから除外しています。そのマージンは自動的に配置できません。これを解決するには、<div>を宣言して、含まれている div の途中まで全体をシフトしてから、 を宣言してleft: 50%;、それ自体の幅の半分だけ元に戻しmargin-left: -480px;ます。

この CSS を試してください:

body{
    margin:0;
    font-family:Georgia,Times,serif !important;
    font-size:12pt;
    background:white;
}
#header{
    height: 60px;
    width: 100%;
    border: 1px solid black;
    position: relative;
}
#navWrap{
    position: absolute;
    left: 50%;
    margin-left: -480px;
    background:white;
    bottom: 0;
    font-size: 12pt;
    height: 40px;
    border: 1px solid black;
    width: 960px;
}


#contentWrapper{
    width:960px;
    padding: 0;
    margin:15px auto 10px auto;
}

#content{
    padding: 20px 10px 10px 10px;
    height:100%;
    background:#fff;
    border: 1px solid black;
}

#footer {
    width:100%;
    height:260px;
    margin:0 auto;
    padding: 20px 10px 10px 10px;
    border: 1px solid black;
    bottom:0;
}
#copyright{
    width:100%;
    height:60px;
    bottom:0;
    margin: 0 auto;
    border: 1px solid black;
}

http://jsfiddle.net/kCwQP/を参照してください。

于 2013-06-16T12:38:56.627 に答える