0

我有一个页脚，我希望它使用 960 网格系统的宽度为 100%，一切都很好，我可以使用 id 在 div 标签中工作。但是网格一直浮动到页面的左侧，而使用网格的整个站点都以页面为中心。我尝试将 prefix_2 推到右侧，但它没有正确排列。这是我的代码开始。

<div id="footer" class="container_12"><img class="prefix_6" id="abs" align="right"     src="#img" width="500" height="258" />
<br /><br />
<div class="grid_2"><p><a href="#link">Home</a></p><p><a href="#link">Services</a></p><p><a href="#link">Plans</a></p></div>
<div class="grid_2"><p><a href="#link">Pricing</a></p><p><a href="#link">Design</a></p><p><a href="#link">Logos</a></p></div>
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p><a href="#link">Contact Us</a></p></div>
<div class="grid_6"><a href="#link"><img src="#img" width="16" height="16" />Follow me on Twitter</a> <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
</div>

CSS：

#footer {
    background-color: #f0e9d8;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #6e2500;
    font-weight: bold;
    height: 250px;
}
#abs {
    position: absolute;
    clip: rect(auto,auto,500px,auto);
}
4

2 回答 2

0

如果我理解正确，您希望页脚是 100% 宽度吗？这很容易解决。您只需要一个围绕您的页脚代码的包装器。我会这样做：

    <div id="footer">
        <div class="container_12">
            <img class="prefix_6" id="abs" align="right"     src="#img" width="500" height="258" />
            <br /><br />
            <div class="grid_2"><p><a href="#link">Home</a></p><p><a href="#link">Services</a></p><p><a href="#link">Plans</a></p></div>
            <div class="grid_2"><p><a href="#link">Pricing</a></p><p><a href="#link">Design</a></p><p><a href="#link">Logos</a></p></div>
            <div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p><a href="#link">Contact Us</a></p></div>
            <div class="grid_6"><a href="#link"><img src="#img" width="16" height="16" />Follow me on Twitter</a> <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
        </div>
    </div>

那的CSS将是：

#footer {
    background-color: #f0e9d8;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #6e2500;
    font-weight: bold;
    height: 250px;
    width: 100%;
    position: relative;
}
#abs {
    position: absolute;
    clip: rect(auto,auto,500px,auto);
}
于 2013-07-01T16:50:38.947 回答
0

如果您希望页脚的宽度为 100%，只需将其从 960 网格系统中删除。

<html>
  <body>
    <header>
      Header
    </header>
    <section class="container_12">
      <!--960 grid-->
    </section>
    <footer class="footer-main">
      <!--img-->
    </footer>
  </body>
</html>

css

.footer-main {
  width:100%;
}
于 2013-07-01T16:57:45.023 回答