什么导致我的标题移动？

我正在处理一个简单的布局，需要一个页眉，页脚和主要内容之间。然而，有些东西正在扰乱我。如果我在标题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>

来源

2012-05-10 Jedda

嗯，你为什么要使用多个项目进行ID = '包装'？

我加

{ 
clear:both; 
overflow:hidden; 
}

到你的主要内容容器（它也是一个“包装”），它似乎工作。

来源

2012-05-10 10:19:23

太棒了！这工作。我使用相同样式的多重包装的原因是因为我正在制作流畅的布局，因此外包装为1280像素，一些内容（如标题图像）将填充浏览器屏幕，但大多数主要内容将位于960像素的包装内我叫.wrap-inner。希望这是有道理的。 – Jedda

您使用了clear：两者都在您的解决方案中。我添加了一个clearfix到浮动项目的父div（标题），如果没有做同样的事情添加明确：两个主要内容？ – Jedda

我的意思是你不应该使用多个元素具有相同的ID，ID应该是唯一的http://www.w3schools.com/tags/att_standard_id.asp 最好是用类来代替。 –

看起来你没有设置任何的基本样式。例如：

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

来源

2012-05-10 09:59:01 luke2012

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

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

来源

2012-05-10 10:00:29 jumancy

Cheers Jumancy @ luke2012虽然这确实修复了神秘的标题页边距，但这意味着我无法在{margin-top：0}之后为我的H1标签添加任何页边距？ – Jedda

试试这个请

body 
    { 
    margin:0; 
    padding:0; 
    }

来源

2012-05-10 10:02:44 khurram

khurram，这并没有改变任何东西... – Jedda

检查上面的jumancy的css。 – khurram

什么导致我的标题移动？

回答

相关问题