フッターの列

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をCSSに追加する必要があります。 （私は<h4>でこの部分を解決しました）

ヒント？

Answer 1

あなたが言ったウェブサイトの同じfooterを複製したいのであれば、同様のHTML構造を複製することをお勧めします。

この場合、ブラウザのインス​​ペクタでコードを調べると、見出しがh4 + ulの5つのグループになります。

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; } 

私はすべてのコードをしなかったが、あなたはそれを達成するために、私が思うに、より良い構造を見ることができます。