Перестройка блоков

Question

Я хочу, чтобы в этом примере у меня моё меню влезло в кусочек между двумя изображениями и растянулось на всю ширину оставшегося места. Я не понимаю, как это можно сделать.

body {
  font-family: sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

h3,
h2,
ul,
li,
body,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
  font-weight: 500;
}

.container {
  max-width: 700px;
  margin: 0 auto 0 auto;
  padding: 0 5px;
}

.flex {
  display: flex;
}

.header {
  margin-top: 5px;
  flex-wrap: wrap;
}

.header__img {
  min-width: 100px;
  max-height: 150px;
}

.header__img:nth-child(1) {
  width: 30%;
}

.header__img:nth-child(2) {
  width: 70%;
  max-height: 75px;
}

.header__img img {
  height: 100%;
  width: 100%;
}

.header__ul {
  background: SteelBlue;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

<div class="section1">
  <div class='container'>

    <header class="header flex">
      <div class="header__img">
        <img src='https://picsum.photos/150/150'>
      </div>
      <div class="header__img">
        <img class="menu" src='https://picsum.photos/600/150'>
      </div>
      <ul class="flex header__ul">
        <li>
          <a href='#Menu1'>Меню1</a>
        </li>
        <li>
          <a href='#Menu2'>Меню2</a>
        </li>
        <li>
          <a href='#Menu3'>Меню3</a>
        </li>
        <li>
          <a href='#Menu4'>Меню4</a>
        </li>
      </ul>
    </header>

  </div>
  <!-- .container -->
</div>
<!-- .section -->

Я также после определённой ширины экрана, хочу сделать так:

body {
  font-family: sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

h3,
h2,
ul,
li,
body,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
  font-weight: 500;
}

.container {
  max-width: 700px;
  margin: 0 auto 0 auto;
  padding: 0 5px;
}

.flex {
  display: flex;
}

.header {
  margin-top: 5px;
  flex-wrap: wrap;
}

.header__img {
  min-width: 100px;
  max-height: 150px;
}

.header__img:nth-child(1) {
  width: 30%;
}

.header__img:nth-child(2) {
  width: 70%;
}

.header__img img {
  height: 100%;
  width: 100%;
}

.header__ul {
  width: 100%;
  background: SteelBlue;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

<div class="section1">
  <div class='container'>

    <header class="header flex">
      <div class="header__img">
        <img src='https://picsum.photos/150/150'>
      </div>
      <div class="header__img">
        <img class="menu" src='https://picsum.photos/600/150'>
      </div>
      <ul class="flex header__ul">
        <li>
          <a href='#Menu1'>Меню1</a>
        </li>
        <li>
          <a href='#Menu2'>Меню2</a>
        </li>
        <li>
          <a href='#Menu3'>Меню3</a>
        </li>
        <li>
          <a href='#Menu4'>Меню4</a>
        </li>
      </ul>
    </header>

  </div>
  <!-- .container -->
</div>
<!-- .section -->

Как мне этого добиться? Без абсолютного позиционирования, html структуру можно менять

Answer 1

Если флексогриды не принципиальны (а я их принципиально сам стараюсь не использовать и пока что никому не рекомендую), то вот ещё одно решение (Теперь без абсолютного позиционирования). И ещё раз повторюсь: всё допотопно просто, и главное работать будет везде, даже на деревяшке

.header {position: relative; width: 100%; height: 150px;}

.logo {float: left; width: 150px; height: 150px; background: #16bcb8;}

.banner {float: right; width: calc(100% - 150px); height: 100px; background: #6b9aad;}

.nav {float: right; width: calc(100% - 150px); height: 50px; background: #4474c6;}

img {height: 100px; width: 100%;}

@media (max-width: 800px) {.banner, img {height: 150px;}.nav {width: 100%;}}

<div class="header">
  <div class="logo"></div>
  <div class="banner"><img src="https://portaltele.com.ua/wp-content/uploads/2018/12/twitter.jpg"></div>
  <div class="nav"></div>
</div>

БЛОГ НА HUSL

Перестройка блоков

Ответы (1 шт):