CSS页脚布局问题

Question

我正在尝试创建一个跨浏览器3列的页脚，它们的宽度彼此相等，但不会超出900px的主体宽度。这段代码没有这样做？

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。

Answer 2

如果你的漂浮他们<p>将自其内容的宽度，他们不会有相同的大小。而且顺便说一句，也许div小号可能是这个任务比<p>

Answer 3

试试这个：

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

您htmll，这对于你的风格：

#footer { 
    color: #ffffff; 
    width:100%; 
    background: #111; 
overflow: auto; 
    } 
#footer div { 
width:33%; 
} 
.left { 
text-align:center; 
float:left; 
} 

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

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

在本小提琴所示：http://jsfiddle.net/kLqZP/9/

Answer 4

HTML

> <div id="footer"> 
>   <p class="left">About<br />Contact<br />Next line here</p> 
>   <p class="centered">Terms<br />Privacy<br />Disclaimer</p> 
>   <p class="right"> does not evaluate or guarantee the accuracy</p> 
>  
>  </div> 
>  
>  css 
>  #footer { 
>  color: #ffffff; 
>  width:100%; 
>  background: #111; 
>  clear: both; 
>  overflow: auto; 
>  } 
>  
>  .left { 
>  text-align:left; 
>  float:left; 
>  } 
>   .centered{ 
>  text-align:center; 
>  float:left; } 
> 
>  .right{ 
>  float:left; 
>  text-align:right; 
>  } 

只是一个dd在每列中左移，然后安排div。看看是否有效