Как разбросать элементы шапки по трём сторонам? [закрыт]

153

01 декабря 2019, 16:10

Есть шапка, в которой есть строковое меню (горизонтальное), логотип и одна кнопка. Нужно, чтобы строковое меню было посередине, логотип слева, а кнопка справа.
Это все в одном блоке <div>.

Answer 1

.item { 
  width: 50px; 
  height: 50px; 
  background-color: pink; 
} 
 
.container { 
  display: flex; 
  justify-content: space-between; 
}

<div class="container"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 2

Тут можно сделать это несколькими способами. Первый как написал в своем ответе @meine - используя flexbox, следующий способ используя grid, также можно воспользоваться готовыми решениями, используя для этого к примеру тот же Bootstrap 4.
Вот вариант с grid:

.grid-container { 
  display: grid; 
  grid-template-areas: 'logo grid-menu button';  
  align-content: center; 
} 
.grid-container > div { 
  background-color:#b1db08; 
  text-align: center; 
  padding: 15px 0; 
  font-size: 14px; 
} 
.logo { 
  grid-area: logo; 
} 
.grid-menu { 
  display: grid; 
  grid-area: grid-menu; 
  grid-template-columns: auto auto auto auto auto; 
  align-content: center; 
} 
.menu-item { 
  background-color: #d7db08; 
  text-align: center; 
  padding: 5px; 
  font-size: 14px; 
  border: 1px solid gray; 
} 
.button { 
  grid-area: button; 
} 
.bt { 
  padding: 5px;   
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<div class="grid-container"> 
  <div class="logo"><i class="material-icons">cloud</i></div> 
  <div class="grid-menu"> 
    <div class="menu-item">Главная</div> 
    <div class="menu-item">Новости</div> 
    <div class="menu-item">О нас</div>   
    <div class="menu-item">Контакты</div> 
    <div class="menu-item">Акции</div> 
  </div> 
  <div class="button"> 
    <button class="bt">Click</button> 
  </div>   
</div>

Сильно со стилями не игрался, главное показать принцип, остальное дело вкуса.

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Webpack и jQuery плагины

Моя задача простая, надо подключить JQuey, JqueryInputmask и собственно мой скрипт

168

jQuery

Как сделать чтоб при адаптации центр карты менялся?

У меня есть карта, в ней указан центр, на десктопе все хорошо, но нужно чтоб на планшете (768px) и на мобильном (320px) центр карты (center: [55759456, 37

141

jQuery