頁腳中的列

Question

我試圖複製this網站的頁腳作爲學校項目的一部分。 到目前爲止，我已經想通了，我的div應該像下面這樣的結構：

<div class="wrapper"> 
     <div class="top-side">...</div> 
     <div class="content">...</div> 
     <div class="footer"> 
      <div class="footer-col"> 
       <h4>Column header</h4> 
       <ul> 
        <li>list item1</li> 
        <li>list item2</li> 
       </ul>      
      </div> 
     </div> 
    </div> 

而且我使用的CSS是：

.wrapper .footer { 
    bottom:0; 
    width:100%; 
    margin: 5px; 
    color: #FFFFFF; 
    background-color: black; 
} 

.footer .footer-col { 
    display: block; 
    float: left; 
    margin: 0 20px 0 0; 
    width: 20%; 
} 

.footer .footer-col ul { 
    list-style: none; 
    display: inline; 
    overflow: hidden; 
} 



.wrapper .footer .clear { 
    clear: both; 
} 

這是我的全部代碼爲止。我不知道還有什麼應該添加到我的CSS爲此來工作，因爲它是所需的意義，每列中的每個元素的左對齊和每個列的標題加粗。 （我已經用<h4>解決了這部分問題）

任何提示？

Answer 1

如果你想複製你所說的網站相同的footer，我認爲一個好的方法是複製一個類似的HTML結構。

在這種情況下，請用瀏覽器檢查器檢查代碼，然後選擇5組標題h4 + ul列表。

Here's a hint to do it in a JSFiddle I've made.

CSS

.container {overflow: hidden; background: #000; color: #fff; } 
.footer-tab { float: left; width: 20%; font-family: Arial; } 

ul { padding-left: 0; } 
ul li { list-style: none; margin: 10px 0; font-size: 12px; } 
ul li a { font-weight: bold; } 

我沒有讓所有的代碼，但是你可以看到，我想，一個更好的結構來實現它。