Размещение Div между левым и правым плавающим Div, если есть место, поместите его под ними, если не хватает места - PullRequest
Новая
       26

Размещение Div между левым и правым плавающим Div, если есть место, поместите его под ними, если не хватает места

0 голосов
/ 24 апреля 2018

Я работаю над панелью навигации для веб-сайта, например средней панели навигации. У нее есть логотип (float: left), ссылки на другие страницы и настройки учетной записи в конце (float: right), все рядом,Когда размер окна изменится, я хочу, чтобы все элементы панели навигации оставались без горизонтальной прокрутки.Я хочу сделать это, разместив все ссылки на страницах под логотипом (и все еще сохраняя настройки учетной записи в правом верхнем углу).

В полноэкранном режиме навигационная панель работает идеально (достаточно просто).Когда размер окна изменяется, все портится (последний div выходит за пределы окна).

Два верхних изображения - иллюстрации того, к чему я работаю, и третье - моя текущая проблема.

У меня есть некоторый опыт работы с css, но понимание того, как это исправить (или поиск того, как это исправить), выходит за рамки моих возможностей.Буду очень признателен за помощь:)

1 Ответ

0 голосов
/ 24 апреля 2018

Прикрепленный фрагмент кода, это база, которая использует «CSS-сетку» и медиа-запросы. В CSS есть несколько дубликатов, которые можно было бы потратить с большим количеством времени, улучшить их, минимизировать код. Это дает вам представление о том, как создаются эти макеты. 

 @media only screen and (max-width: 600px) {

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  100px
  100px
  100px
  ;
  grid-template-areas:
  "header-1"
  "header-2"
  "content"
  ;
}

.header-1 {
  grid-area: header-1;
  background-color: grey;
}

.header-2 {
  grid-area: header-2;
  background-color: grey;
}

.content {
  grid-area: content;
  background-color: lightgrey;
}

.header-1 {
  display: grid;
  grid-template-columns:
  1fr
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  ;
  grid-template-areas:
  "box-1 box-2 box-3"
  ;
}


.box-1 {
  grid-area: box-1;
  background-color: magenta;
  margin: 10px;
}

.box-2 {
  grid-area: box-2;
  background-color: cyan;
  margin: 10px;
}

.box-3 {
  grid-area: box-3;
  background-color: green;
  margin: 10px;
}

}

 @media only screen and (min-width: 600px) {

   .wrapper {
     display: grid;
     grid-template-columns:
     1fr
     ;
     grid-template-rows:
     100px
     100px
     100px
     ;
     grid-template-areas:
     "header-1"
     "header-2"
     "content"
     ;
   }

   .header-1 {
     grid-area: header-1;
     background-color: grey;
   }

   .header-2 {
     grid-area: header-2;
     background-color: grey;
   }

   .content {
     grid-area: content;
     background-color: lightgrey;
   }

   .header-1 {
     display: grid;
     grid-template-columns:
     1fr
     1fr
     1fr
     ;
     grid-template-rows:
     100px
     ;
     grid-template-areas:
     "box-1 . box-3"
     ;
   }

   .header-2 {
     display: grid;
     grid-template-columns:
     1fr
     1fr
     1fr
     ;
     grid-template-rows:
     100px
     ;
     grid-template-areas:
     "box-2 box-2 box-2"
     ;
   }


   .box-1 {
     grid-area: box-1;
     background-color: magenta;
     margin: 10px;
   }

   .box-2 {
     grid-area: box-2;
     background-color: cyan;
   }

   .box-3 {
     grid-area: box-3;
     background-color: green;
     margin: 10px;
   }

 }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
</head>

<body>

<div class="wrapper">

    <div class="header-1">
        <div class="box-1"></div>
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>

    <div class="header-2">
      <div class="box-1"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
    </div>

    <div class="content"></div>

</div>



</body>
</html>
...