Question

我试图让我的页脚图像与其上方的内容区域对齐，但我不确定如何。我浏览过并尝试了各种各样的事情，例如添加明确：两者但无济于事

http://dota-bravery.co.cc/

正如您所看到的，底部贴在左侧

以下是页脚的代码部分：

#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>&nbsp;</span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>

Answer 1

您的代码存在一些问题。

您拥有共享相同ID（包装器）的对象。这是不允许的。如果要将样式应用于少数对象，请使用类。

为了解决你的问题，你只需要移动你的页脚，使它在第一个包装div内（它现在在外面，你正在关闭fotter div之前的包装div - 我已经测试过了，它解决了你的问题）。

此外，将第二个wrapper重命名为其他内容。

Answer 2

将页脚居中：

#footer {
    margin: 30px auto 0
}

居中内容

#wrapper {
    width: 680px;
}

您需要添加一些额外的CSS来修复页面内部（宽度与填充错误）

Answer 3

需要认真研究这段代码。您有多个<html>，<head>和<body>代码。看起来像一个完整的HTML页面，其中只有正文内容。您的页面格式如下 - 如果不进行更正，则无法进行任何实际的故障排除。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   ...
</head>
<body>

   ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

       ...
    </head>
    <body onload="generator()">
       ...
    </body>
    </html>
</body>
</html>

将页脚图像与内容区域对齐

3 个答案: