Столбцы в нижнем колонтитуле

Question

Я пытаюсь воспроизвести нижний колонтитул this веб-сайт как часть школьного проекта. До сих пор я понял, что мои дивы должны быть структурированы следующим образом:

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

я не делал весь код, но вы можете видеть, как мне кажется, лучше структура для ее достижения.