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。看看是否有效