将页脚图像与内容区域对齐
我试图让我的页脚图像与其上方的内容区域对齐，但我不确定如何对齐。我浏览并尝试了各种方法，例如添加clear：both但无济于事
正如你所看到的，底部粘在左边
这是带有页脚的代码部分：
#footer {
width: 680px;
height: 100px;
margin: 0 auto;
margin-top: -16px ! important;
padding: 30px 0 0 0;
background: url(http://i.imgur.com/q4neu.png) no-repeat;
}
#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}
#footer a {
color: #0F1720;
}
我在那里得到了 margin-top: -16px ，因为没有它，我在内容和页脚之间有一个空格这是由此确定的。请注意，在我放入生成器之前，页脚已正确对齐。从那时起它就位于左侧。如果有帮助，我也会复制粘贴其余部分：
<body>
<div id="wrapper">
<div id="header">
<h1>{%WebsiteName%}</h1>
<p>{%WebsiteSlogan%}</p>
</div>
<!-- end header -->
<div id="menu">
<h2>Menu</h2>
<ul>
<!--{%menu_start=1%}-->
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
<!--{%menu_end=1%}-->
</ul>
</div>
<!-- end menu -->
<div id="page">
<div id="content">
<h1 class="title"><span> </span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>
I'm trying to get my footer image to be aligned with the content area above it, but I'm not sure how. I've browsed around and tried out various things such as adding clear:both but to no avail
As you can see the bottom is stuck to the left
Here's the code part with the footer:
#footer {
width: 680px;
height: 100px;
margin: 0 auto;
margin-top: -16px ! important;
padding: 30px 0 0 0;
background: url(http://i.imgur.com/q4neu.png) no-repeat;
}
#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}
#footer a {
color: #0F1720;
}
I got the margin-top: -16px there because without it I got a space between content and footer which was fixed by this. Note that the footer was correctly aligned before I put the generator in. Ever since it's been on the left. In case it's helpful I'll also copypaste the rest:
<body>
<div id="wrapper">
<div id="header">
<h1>{%WebsiteName%}</h1>
<p>{%WebsiteSlogan%}</p>
</div>
<!-- end header -->
<div id="menu">
<h2>Menu</h2>
<ul>
<!--{%menu_start=1%}-->
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
<!--{%menu_end=1%}-->
</ul>
</div>
<!-- end menu -->
<div id="page">
<div id="content">
<h1 class="title"><span> </span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的代码存在一些问题。
您有共享相同 id（包装器）的对象。这是不允许的。如果要将样式应用于几个对象，请使用类。
要解决您的问题，您只需移动页脚，使其位于第一个包装器 div 内（目前在外面，您在 fotter div 之前关闭包装器 div - 我已经测试过它，它修复了您的问题）问题）。
另外，将第二个
wrapper重命名为其他名称。There's a few problems with your code.
You have objects that share the same id (wrapper). That's not allowed. Use classes if you want to apply styles to a few objects.
To fix your problem, you simply need to move your footer so that it is within the first wrapper div (it's outside at the moment, you're closing the wrapper div just before the fotter div - I've tested it, it fixes your problem).
Also, rename the second
wrapperto something else.将页脚居中：
将内容居中
您将需要添加一些额外的 CSS 来修复页面内部（宽度与填充错误）
Center the footer:
Center the content
You will need to add some additional CSS to fix the inside of the page (width vs padding errors)
这段代码需要认真看。您有多个
、和标记。看起来像一个完整的 HTML 页面，其中应该只有正文内容。您的页面格式如下 - 如果不进行更正，则无法进行任何实际的故障排除。This code needs to be seriously looked at. You have more than one
<html>,<head>, and<body>tag. Look like a full HTML page where only body content should be. your page is formatted like this - and without correcting that, no realistic trouble shooting can take place whatsoever.