Какие есть варианты для верстки шапки?

339

10 февраля 2018, 22:24

Я разделил все на 4 части, логотипу задал float:left , двум переключателям тоже, и сделал отступ от левого края. остальным элементам float:right

Мне кажется, что это не совсем правильный подход. Есть варианты по-лучше и что бы было кроссбраузерно?

В web'e уже около 6-7 месяцев, но иногда возникают такие, казалось бы, глупые вопросы. Мало ли я делал все время не правильно.

Answer 1

По идее пора уже на flex переходить, он поддерживается ie10 и 11, правда частично.

Пример:

<header>
  <div class="item1">
    Лево
  </div>
  <div class="item2">
    Центр
  </div>
  <div class="item3">
    Право
  </div>
  <div class="item4">
    Еще правее
  </div>
</header>
<style>
  *{
    margin: 0;
    padding: 0;
    color: white;
  }
  header{
    display: flex;
    justify-content: space-between;
    padding: 25px;
    background-color: red;
  }
  .item1{
    background-color: green;
  }
  .item2{
    flex: 1;
    display: flex;
    justify-content: center;
    background-color: blue;
  }
  .item3{
    background-color: black;
  }
  .item4{
    padding-left: 25px;
    background-color: grey;
  }
</style>

Если же работодатель не одобряет, то объедини в 1-н блок переключатели, так же контакты с языком, дабы уменьшить количество float.

(P.S. сейчас устраиваюсь на новую работу и уже пишут, что не плохо бы на сетке bootstrap 4 сделать, а он на flex).

Answer 2

float - немного устарел.

Рекомендую использовать display: flex; и width: 100%

<style>
header{ 
width: 100%;
display: flex; // Делаем блок резиновым, все встает в ряд.
justify-content: space-beetwen; // Делает между ними равное расстояние
</style>
<header>
<div class="logo"> img-logo </div>;
<div class="links"> <a href="#">top CS:GO </a> | <a href="#">top PUBG</a> </div>
<div class="social"> иконки соц.сетей </div>
</header>

В таком случае Вам обеспечена не только кроссбраузерность, но и адаптация под разные экраны!