我希望container-2完全可见，但box2中的框在移动视图中覆盖了它。我不希望box2中的框的大小有任何不同，我只是希望将container 2向下推，以便在移动设备中完全可见。
body {
margin: 0;
width: 100%;
}
.container {
width: 100%;
height: 100vh;
background-color: rgb(152, 152, 152);
}
.container-2 {
width: 100%;
height: 100vh;
background-color: rgb(46, 6, 6);
}
.box-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.box1 {
background-color: rgb(65, 186, 186);
width: 50%;
height: 100%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.box1 {
background-color: rgb(65, 186, 186);
width: 100%;
height: 50%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 100%;
height: 50%;
}
}<body>
<div class="container">
<div class="box-container">
<div class="box1">
</div>
<div class="box2" id="box">
<div class="box1" style="background-color: blue; height: 50%;"></div>
<div class="box1" style="background-color: green; height: 50%;"></div>
<div class="box1" style="background-color: yellow; height: 50%;"></div>
<div class="box1" style="background-color: orange; height: 50%;"></div>
</div>
</div>
</div>
<div class="container-2">
</div>
</body>
</html>最佳答案
您的问题是因为您在height:50%内将内联CSS设置.box1设置为#box，垂直设置（在移动视图中）将总计为200%，从而覆盖了.container-2，因此在移动视图中将其设置为
body {
margin: 0;
width: 100%;
}
.container {
width: 100%;
height: 100vh;
background-color: rgb(152, 152, 152);
}
.container-2 {
width: 100%;
height: 100vh;
background-color: rgb(46, 6, 6);
}
.box-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.box1 {
background-color: rgb(65, 186, 186);
width: 50%;
height: 100%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#box .box1 {
height: 50%
}
#box .box1:nth-child(3n+1) {
background: blue
}
#box .box1:nth-child(n+2):nth-child(-n+3) {
background: red
}
@media (max-width: 600px) {
#box .box1 {
height: 25%
}
.box1 {
background-color: rgb(65, 186, 186);
width: 100%;
height: 50%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 100%;
height: 50%;
}
}<div class="container">
<div class="box-container">
<div class="box1">
</div>
<div class="box2" id="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</div>
</div>
<div class="container-2">
</div>关于html - 如何在移动 View 中使一个容器下推另一个容器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37233712/