CSS對齊框

Question

我有一個包含3列內容的頁腳。目前該CSS正在使用float:left。我試過以下，但我不能讓它對齊垂直和水平。

• 顯示塊
• 顯示塊內聯
• 餘量：0汽車

HTML：

<div id="footer"> 
    <div class="column"> 
    <h3>Information</h3> 
    <ul> 
      <li><a href="">Delivery Information</a></li> 
      <li><a href="">Privacy Policy</a></li> 
      <li><a href="">Terms &amp; Conditions</a></li> 
      </ul> 
    </div> 
</div> 

CSS：

#footer .column { 
    float:left; 
    width: 25%; 
    min-height: 100px; 
} 

Answer 1

<div class="footer"> 
<div class="columns"> 
    <div class="column"> 
     Information 
     <ul> 
      <li>One</li> 
      <li>One</li> 
      <li>One</li> 
     </ul> 
    </div> 
    <div class="column"> 
     Information 
     <ul> 
      <li>Two</li> 
      <li>Two</li> 
      <li>Two</li> 
     </ul> 
    </div> 
    <div class="column"> 
     Information 
     <ul> 
      <li>Three</li> 
      <li>Three</li> 
      <li>Three</li> 
     </ul> 
    </div> 
</div> 
</div> 

<style> 

.footer 
{ 
    width:100%; 
    background-color:Yellow; 
} 

.footer .columns 
{ 
    text-align:center; 
} 

.column 
{ 
    text-align:center; 
    display:inline; 
    width: 150px; 
} 

</style> 

Answer 2

.column ul li{ 
    float:left; 
    width: 25%; 
    min-height: 100px; 
} 

上面會對齊，然後水平，如果這是你的問題是問什麼

編輯

<div class="footer" id="footer"> 
    <div class="column"> 
     <h3>Information</h3> 
      <ul> 
      <li><a href="">Delivery Information</a></li> 
      <li><a href="">Privacy Policy</a></li> 
      <li><a href="">Terms &amp; Conditions</a></li> 
     </ul> 
    </div> 
</div> 

.footer.column{ 
    float:left; 
    width: 25%; 
    min-height: 100px; 
} 

Answer 3

我相信你已經有了正確的解決方案，所以你可能做其他事情不對。我調整你的最小高度爲150px，並在這裏工作得很好：http://jsfiddle.net/xkdk9/1/

Answer 4

你應該使用容器div絕對位置和#footer應該有位置相對。 下面是解碼 http://jsfiddle.net/7Pcag/1/

以上簡單的解決方案http://jsfiddle.net/7Pcag/5/