Как заставить мои входные теги смещаться при изменении размера? - PullRequest
Новая
       5

Как заставить мои входные теги смещаться при изменении размера?

0 голосов
/ 26 сентября 2018

Я застрял с разметкой сетки.Что я хочу сделать, так это когда я изменяю размер браузера или получаю к нему доступ с мобильного или планшетного устройства.Теги ввода [синие линии здесь;извините за раздражающий стиль] должен сместиться ниже, а остальные 3 тега должны остаться в одной строке.Я попытался расположить маленькую коробку справа, но это не сработало. 

.nav{
    max-width: 1500px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill,minmax(390px,200px));
}
.input{
    height: 30px;width: 100%;
    margin: 15px 0px;
    border: none;border-bottom:3px solid blue;
    outline: none;
}
.search.icon {
  right: 10px;bottom: 25px;
  color: #000;
  position: absolute;
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px currentColor;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.search.icon:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: currentColor;
}
<body>
    <div class="nav">
        <div>
            <img style="width: 200px;height: 50px;" src="https://picsum.photos/g/200/300" alt="">
        </div>
        <div>
              <input type="text" class="input">  
        </div>
        <div>
            <div style="position: relative">
               <span class="search icon" style="position: absolute" class=""></span>
                <input type="text" class="input">
            </div>
        </div>
        <div style="display: grid;grid-template-columns: 4fr 1fr">
            <div>
                <h2 style="text-align: center">login</h2>
            </div>
            <img style="height: 50px;width: 50px;float: right" src="https://picsum.photos/200/300/?gravity=east" alt="">
        </div>
    </div>
</body>

https://codepen.io/kalpeshshende/full/JagQrZ

1 Ответ

0 голосов
/ 26 сентября 2018

Вот одно из возможных решений.Я не совсем уверен, что вы хотели сделать с другими 3 элементами (те, которые остаются в первом ряду), но все это оправдано равномерно и разрывается на 992px; 

.nav {
  max-width: 1500px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto auto;
  /* repeat(auto-fill, minmax(390px, 200px)); */
  grid-template-rows: auto;
  justify-content: space-evenly;
}

.input {
  height: 30px;
  width: 100%;
  margin: 15px 0px;
  border: none;
  border-bottom: 3px solid blue;
  outline: none;
}

.search.icon {
  right: 10px;
  bottom: 25px;
  color: #000;
  position: absolute;
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px currentColor;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.search.icon:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: currentColor;
}

@media (max-width: 992px) {
  .nav {
    grid-template-rows: auto auto;
  }
  .inp {
    grid-row: 2;
  }
}
<body>
  <div class="nav">
    <div>
      <img style="width: 200px;height: 50px;" src="https://picsum.photos/g/200/300" alt="">
    </div>
    <div class="inp">
      <input type="text" class="input">
    </div>
    <div class="inp">
      <div style="position: relative">
        <span class="search icon" style="position: absolute" class=""></span>
        <input type="text" class="input">
      </div>
    </div>
    <div style="display: grid;grid-template-columns: 4fr 1fr">
      <div>
        <h2 style="text-align: center">login</h2>
      </div>
      <img style="height: 50px;width: 50px;float: right" src="https://picsum.photos/200/300/?gravity=east" alt="">
    </div>
  </div>
</body>
...