Flex-wrap не работает на элементе с абсолютным позиционированием? - PullRequest
Новая
       43

Flex-wrap не работает на элементе с абсолютным позиционированием?

0 голосов
/ 30 апреля 2020

Я создаю адаптивную веб-страницу с помощью flexbox, и мне не следует использовать какие-либо фреймворки. У меня проблемы с переносом элементов на разные устройства экрана. У меня есть нижний колонтитул с двумя элементами div, поле подписки должно быть обернуто ниже основного содержимого, и я не могу заставить его работать.

Что мне нужно для достижения sh, так это иметь фиолетовый эль с классом subscribe, чтобы обернуть его под элементом класса footer-info.

Вот кто это выглядит сейчас: enter image description here

Вот мой код 

<footer class="footer">
 <div class="col footer-info">
   <div class="footer-content">
     <p>Lorem Ipsum is simply dummy text of the printing and</p>
   </div>
   <div class="col subscribe">
     <div class="subscribe-content">
       <h3 class="footer-heading">Join our mailing list</h3>
         <form>
           <input type="text" id="email" name="email" placeholder="Your email address" required >
           <button type="button" class="button">Subscribe</button>
         </form>
     </div>
   </div>
 </div>
</footer>

 footer {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    margin: 100px -40px 0;  /*to offset the body margin and have full width*/
    padding: 60px 80px 40px;
    background-color:#D64C31;
    color: white;
  }

 .subscribe {
    width: 365px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    background-color: #4A455C;
    padding: 80px 60px 20px;
    top: -60px;
    right: 60px;
    bottom: 0;
  }

 .footer-info {
    display: flex;
    flex-direction: column;
    width: 600px;
  }


  @media screen and (max-width: 1200px) {
    .footer-content{
      max-width: 360px;
    }

    .subscribe {
      width: 100%;
      top: auto;
      right: 0;
      left: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .footer-content {
      max-width: 640px;
    }
  }

Любая помощь будет оценена !

1 Ответ

0 голосов
/ 30 апреля 2020

enter image description here

Просто удалите абсолютную позицию из подписки. 

.subscribe {
  width: 365px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: #4A455C;
  padding: 80px 60px 20px;
  top: -60px;
  right: 60px;
  bottom: 0;
}
...