Question

我有一个页脚，我希望它使用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);
}

Answer 1

如果我理解正确，您希望该页脚宽度为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);
}

Answer 2

如果您希望页脚宽度为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%;
}

960网格中100％宽度的页脚

2 个答案: