Создание адаптивной шапки сайта

Создание адаптивной шапки сайта

Сегодня ми с вами создадим адаптивную шапку для сайта в 4 колонки. По данному примеру, вы сможете создавать адаптивную шапку в любое количество колонок.

Итак, приступим: 

1. Напишем код для нашей шапки по такой структуре:
   
   <div class="row"> <div class="my_column">Ваш код первого блока</div> <div class="my_column">Ваш код...</div> <div class="my_column">Ваш код...</div> <div class="my_column">Ваш код...</div> </div>

   1 2 3 4 5 6

   <div class="row">   <div class="my_column">Ваш код первого блока</div>   <div class="my_column">Ваш код...</div>   <div class="my_column">Ваш код...</div>   <div class="my_column">Ваш код...</div> </div>

   
   2. Зададим стили для наших классов:
   
   .my_column { float: left; width: 25%; } .row:after { content: ""; display: table; clear: both; } /* Адаптивный макет - когда ширина экрана составляет менее 600 пикселей, 4 столбца располагаются друг под другом, когда более 600 в одну линию. */ @media screen and (max-width: 600px) { .my_column { width: 100%; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   .my_column {   float: left;   width: 25%; } .row:after {   content: "";   display: table;   clear: both; } /* Адаптивный макет - когда ширина экрана составляет менее 600 пикселей, 4 столбца располагаются друг под другом, когда более 600 в одну линию. */ @media screen and (max-width: 600px) {   .my_column {     width: 100%;   } }

   
    

   Вот и все! Получается такая шапка:
   Соответственно если мы хотим создать шапку на 3 колонки в стилях пишем:

   .my_column { float: left; width: 33.33%; }

   1 2 3 4

   .my_column {   float: left;   width: 33.33%; }

   То есть берем 100% и делим на нужное нам количество колонок.