響應式設計 - 調整窗口大小時 Div 消失

Question

只是試圖讓兩個 div 元素（ .left和.right ）在寬度值小於 800px 時垂直顯示。 但是，當我嘗試這樣做時，div .left消失了。 我從代碼中刪除了一些內容以保持簡短。

有沒有人知道為什么會發生這種情況以及如何解決？

這是我的代碼：

 * { box-sizing: border-box; } body { color: white; } .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: #282C34; } .right { right: 0; background-color: #616161; } .centered { position: absolute; width: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .container { position: relative; border-style: solid; border-color: #92a8d1; background-color: #92a8d1; } @media screen and (max-width:800px) { .left, .right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } }

 <div class="split left"> <div class="centered"> <center> <div class="container"> <div class="middle"> <div class="text"> <a></a> </div> </div> <div class="information"> <h2>asd</h2> </div> </div> </center> </div> </div> <div class="split right"> <div class="centered"> <center> <div class="container"> <div class="middle"> <div class="text"> <a></a> </div> </div> <div class="information"> <h2>fgh</h2> </div> </div> </center> </div> </div>

謝謝你的幫助！

Answer 1

 * { box-sizing: border-box; } body { color: white; margin: 0; } .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: #282C34; } .right { right: 0; background-color: #616161; } .centered { position: absolute; width: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .container { position: relative; border-style: solid; border-color: #92a8d1; background-color: #92a8d1; } @media screen and (max-width:800px) { .left, .right { width: 100%; height: 50%; /* The width is 100%, when the viewport is 800px or smaller */ } .split { position: relative; } body { height: 100vh; } }

 <div class="split left"> <div class="centered"> <center> <div class="container"> <div class="middle"> <div class="text"> <a></a> </div> </div> <div class="information"> <h2>asd</h2> </div> </div> </center> </div> </div> <div class="split right"> <div class="centered"> <center> <div class="container"> <div class="middle"> <div class="text"> <a></a> </div> </div> <div class="information"> <h2>fgh</h2> </div> </div> </center> </div> </div>

Answer 2

將兩個 div 嵌套在一個包裝 div 中，並使用媒體查詢和flex屬性。 喜歡..

HTML：

<div class="wrapper">
    <div class="left">
        ...
    </div>
    <div class="right">
        ...
    </div>
</div>

CSS/SCSS

@media(max-width: 800px) {
    .wrapper {
        display: flex;
        flex-direction: column;
        ...
    }
}

或嘗試：

<ul class="flex-container column">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}

.column li {
  background: deepskyblue;
}