CSS - 在移动设备上 2 个 div 一个在另一个之下答案

【问题标题】：CSS - 2 divs one below another on mobileCSS - 在移动设备上 2 个 div 一个在另一个之下
【发布时间】：2021-09-22 18:34:44
【问题描述】：

当浏览器的宽度针对移动设备调整大小时，我试图将 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

有人可以帮忙吗？

【问题讨论】：

我猜你的 html 不完整。请分享完整代码（以便我们查看 .news-content 的位置）
已添加。对不起。 @Shahriar
没问题的朋友！
元素的初始css属性是什么？
已更新。 @Shahriar

标签： html css media-queries

【解决方案1】：

如果我理解正确的话：

.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>

【讨论】：

【解决方案2】：

声明父 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;
    }
  }

【讨论】：