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/