Question

我正在开发一个简单的布局，需要页眉，页脚和主要内容。然而，有些事情让我烦恼不已。如果我在标题http://www.reversl.net/before/下面添加了一个图像，那么一切都准确地位于我想要的位置。但是，如果我删除图像，我的标题会从页面顶部给出一个边距，如图所示http://www.reversl.net/after/我猜它与我的浮动标题有关，并且它的浮动内容未被清除。但是我已经包含了clearfix hack，这似乎没有改变。有什么想法吗？

<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>

Answer 1

这是由于主要内容的H1边缘。

.wrap-inner h1 {margin-top:0}

Answer 2

嗯，你为什么要使用id ='wrap'的多个项目？

我添加了

{
clear:both;
overflow:hidden;
}

到你的主要内容容器（它也是'wrap'），它似乎有效。

Answer 3

您似乎没有设置任何基本样式。例如：

H1 {
     font-size:2em;
     margin-top:1em;
     ......
 }

Answer 4

请试试这个

body
    {
    margin:0;
    padding:0;
    }

是什么导致我的标题移动？

4 个答案: