CSS

Question

当浏览器的宽度针对移动设备调整大小时，我试图将 2 div 个放在另一个下方？请注意，一个 div 包含两个输入字段

  <div class="newsletter">
       <div class="news-img"></div>
          <div class="news-content">
        <div class="news-text">         
             <h4>Bla bla</h4>
        </div>

    <div class="form-wrap">
      <input type="email" name="EMAIL" placeholder="Email" required="">
      <input type="submit" value="Submit">
    </div>

   </div>
 </div>

我试图用以下方法解决它：

@media only screen and (max-width: 600px) {
  .news-content {
    flex-direction: column;
    width: auto;
  }
}

并使用其他一些属性进行测试，但没有成功。

https://codepen.io/filipDevelop/pen/zYzagBP

有人可以帮忙吗？

Answer 1

声明父级 position : relative 然后将 div 声明为 position:absolute ，使用 z-index 将 div 置于上方或下方。

@media only screen and (max-width: 600px) {
    .newsletter {
      position: relative;
    }
    //upper div
    .news-content {
      position: absolute;
      width: auto;
      top: 0;
      left: 0;
      z-index: 2;
    }
    // lower div
    .another-div{
      position: absolute;
      width: auto;
      z-index: 1;
      top: 0;
      left: 0;
    }
  }

Answer 2

如果我理解正确的话：

.news-content {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  padding: 30px 35px;
  text-align: left;
  color: black;
  text-align: left;
}

.form-wrap {
  display: inline-flex;
}

.form-wrap input[type=email] {
  width: 70%;
  margin: 0;
}

.form-wrap input[type=submit] {
  background-color: #bd9b84;
  width: auto;
  padding: 13px 21px 13px 24px;
  margin-left: 5px;
}

.form-wrap input[type=submit]:hover {
  background-color: #bd9b90;
}
@media only screen and (max-width: 600px) {
  .news-content {
    grid-template-columns: 1fr;
    width: auto;
  }
  .form-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }
  .form-wrap input[type=submit] {
    margin-left: 0;
  }
  .form-wrap input[type=email] {
    padding: 1em 0;
  }
}

<div class="newsletter">
  <div class="news-img"></div>
    <div class="news-content">
      <div class="news-text">         
        <h4>Bla bla</h4>
      </div>
      <div class="form-wrap">
        <input type="email" name="EMAIL" placeholder="Email" required="">
        <input type="submit" value="Submit">
      </div>
  </div>
</div>

CSS - 2 div 在手机上一个比另一个低

CSS - 2 divs one below another on mobile

html

media-queries