>我正在研究一个简单的布局,需要页眉、页脚和主要内容。但是,有些事情有点困扰着我。如果我在标题下方包含一张图像 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 ▼</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>
这是由于主要内容中的 H1 边距。
.wrap-inner h1 {margin-top:0}
嗯,为什么使用 id='wrap' 的多个项目?
我添加了
{
clear:both;
overflow:hidden;
}
到您的主要内容容器(它也是一个"包装"),它似乎有效。
看起来您尚未设置任何基本样式。例如:
H1 {
font-size:2em;
margin-top:1em;
......
}
请尝试此操作
body
{
margin:0;
padding:0;
}