响应式设计 - 调整窗口大小时 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;
}