CSS页脚布局问题

Question

我正在尝试创建一个跨浏览器的 3 列页脚，它们的宽度彼此相等，但不会超过 900 像素的主体宽度。此代码不执行此操作？？

html
<div id="footer">
    <p class="left">About<br />Contact<br />Next line here</p>
    <p class="right"> does not evaluate or guarantee the accuracy</p>
<p class="centered">Terms<br />Privacy<br />Disclaimer</p>
</div>

css
 #footer  {
  color: #ffffff;
  width:100%;
  background: #111;
  clear: both;
  overflow: auto;   
   } 

.left {
text-align:left;
float:left;
}

.right{
float:right;
text-align:right;
}

.centered{
text-align:center;
}  

Answer 1

根据您当前的标记，我能看到的最简单的解决方案是:

#footer {
    width: 900px;
}
#footer > p {
    width: 30%;
    display: block;
    float: left;
}

p:nth-child(odd) {
    background-color: #ccc;
}

JS Fiddle demo .

---

编辑 以建议稍作修改，因为您的页脚 div 似乎是指向其他内容的链接列表，我建议修改您的标记，如下所示建议指南:

<div id="footer">
    <ul>
        <li>menu one
            <ul>
                <li>About</li>
                <li>Contact</li>
                <li>Next line here</li>
            </ul></li>
        <li>menu two
            <ul>
                <li>Does not evaluate, or guarantee the accuracy</li>
            </ul></li>
        <li>menu three
            <ul>
                <li>Terms</li>
                <li>Privacy</li>
                <li>Disclaimer</li>
            </ul></li>
    </ul>
</div>

还有 CSS:

#footer {
    width: 900px;
    overflow: hidden;
}

#footer > ul {
    width: 100%;
}

#footer > ul > li {
    width: 30%;
    display: block;
    float: left;
    font-weight: bold;
}

#footer > ul > li > ul {
    font-weight: normal;
}

JS Fiddle demo .