CSS--移動端上的2個div，一個在另一個下面。 -有解無憂

我試圖在瀏覽器的寬度調整為移動端時，將2個div放在另一個下面？請注意，其中一個div里有兩個輸入欄位

。

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

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

   </div>/span>
 </div>/span>

我試圖用以下方法來解決：

我試圖用以下方法來解決。

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

還用其他一些屬性進行了測驗，但沒有成功。

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

有人能幫助解決這個問題嗎？

uj5u.com熱心網友回復：

宣告父節點position:relative，然后將div作為position:absolute，使用z-index使div高于或低于。

@media only screen and (max-width: 600px) {
    .newsletter {
      position: relative;
    }
    //上層 div
    .news-content {
      position: absolute;
      width: auto;
      top: 0;
      left: 0;
      z-index: 2;
    }
    // 下部的div
    .Another-div{
      position: absolute;
      width: auto;
      z-index: 1;
      top: 0;
      left: 0;
    }
  }

uj5u.com熱心網友回復：

如果我沒有理解錯的話：

span class="hljs-selector-class">.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]/span> {
  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;
    差距。1em;
  }
  .form-wrap input[type=submit]{
    margin-left: 0;
  }
  .form-wrap input[type=email]/span> {
    padding: 1em 0;
  }
}

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/333726.html

標籤：

上一篇：MVI模式下的多狀態模型

下一篇：每個標簽的顏色不同