1

ヘッダー、フッター、メインコンテンツを間に入れるシンプルなレイアウトに取り組んでいます。しかし、何かが私を少し悩ませています。ヘッダーhttp://www.reversl.net/before/の下に画像を含めると、すべてが希望の場所に正確に配置されます。しかし、画像を削除すると、ここに示すように、ヘッダーがページの上部からマージンを与えますhttp://www.reversl.net/after/フロートされたヘッダーに関連していて、フロートされたコンテンツがクリアされていないことを推測しています。しかし、私はclearfixハックを含めましたが、それは状況を変えていないようです。何か案は？

<body>
<div class="header clearfix">
<div id="wrap">
    <div class="wrap-inner">
        <ul id="nav-dash">
            <li><a href="#"><img class="header-avatar" src="http://placehold.it/15x15" width="15px" height="15px" alt="" /> YOU &#9660;</a>
                <ul>
                    <li class="first"><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                </ul>
            </li>
        </ul><!--.nav-->
        <div id="logo"><a href="#">LOGO</a></div><!--#logo-->
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</div><!--#header-->


<div class="wrap-inner">
    <h1>Main Content Here...</h1>
</div><!--.wrap-inner-->


<footer>
<div id="wrap">
    <div class="wrap-inner">
        <p>Footer Text Here....</p>
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</footer>
</body>
</html>
4

4 に答える 4

3

これは、メインコンテンツのH1マージンによるものです。

.wrap-inner h1 {margin-top:0}
于 2012-05-10T10:00:29.923 に答える
1

うーん、なぜid ='wrap'で複数のアイテムを使用するのですか？

追加した

{
clear:both;
overflow:hidden;
}

メインのコンテンツコンテナ（これは「ラップ」でもあります）に追加すると、機能するようです。

于 2012-05-10T10:19:23.993 に答える
0

これを試してください

body
    {
    margin:0;
    padding:0;
    }
于 2012-05-10T10:02:44.103 に答える
0

Looks like you haven't set any base styles. For example:

H1 {
     font-size:2em;
     margin-top:1em;
     ......
 }
于 2012-05-10T09:59:01.983 に答える