0

введите сюда описание изображения

Второй блок необходимо разместить в одну строку с nav.

Может нужно как то поменять структуру html?

P.s. решение без js, bootstrap'а и position: absolute


Код:

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400&family=Oswald:wght@200;300;400;700&family=Roboto+Condensed&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(42, 61, 59);
  /* font-family: 'Cormorant', serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Roboto Condensed', sans-serif; */
}

.container {
  margin: 0 auto;
  width: 1110px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 680px;
}

.logo {
  height: 75px;
}

.nav__item {
  font-family: 'Oswald';
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

.nav__search {
  padding-left: 28px;
  background-image: url('../assets/header/search.png');
  background-repeat: no-repeat;
  background-position: left
}

.info {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.info__title {
  font-family: 'Oswald';
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #43FFD2;
  text-align: end;
}

.info__text {
  font-family: 'Oswald';
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}
<header>
  <div class="container">
    <nav class="nav">
      <a class="logo" href="#"><img src="" alt="Логотип"></a>
      <a class="nav__item" href="#">Каталог</a>
      <a class="nav__item" href="#">Доставка и оплата</a>
      <a class="nav__item" href="#">Контакты</a>
      <a class="nav__item" href="#">FAQ</a>
      <a class="nav__item nav__search" href="#">Поиск</a>
    </nav>
    <div class="info">
      <div class="info__mail">
        <p class="info__title">zakaz@loverflower.by</p>
        <p class="info__text">Доставка 24/7 по договоренности с оператором</p>
      </div>
      <div class="info__street">
        <p class="info__title">ул. Тимирязева 67</p>
        <p class="info__text">10:00 до 21:00 без выходных</p>
      </div>
    </div>
  </div>
</header>

1 ответ 1

1

При текущей раскладке элементов можно добавить эти два свойства в уже имеющиеся стили

.container {
  /* ... */
  display: flex;
}

.info {
  /* ... */
  flex-grow: 1;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.