html - 响应式设计 - 调整窗口大小时 Div 消失

Question

当宽度值小于 800px 时，试图让两个 div 元素（.left和）垂直显示。但是，当我尝试这样做时.right，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>

谢谢你的帮助！

标签： htmlcssresponsive-designpositioncss-position

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>