Html 如何在移动视图中使一个容器向下推另一个容器？

我希望

container-2

完全可见，但是

box2

中的框在移动视图中覆盖了它。我不想让

box2

中的盒子大小有任何不同，我只想将

container 2

向下推，以便在移动设备中完全可见

正文{
保证金：0；
宽度：100%；
}
.集装箱{
宽度：100%；
高度：100vh；
背景色：rgb（152152152）；
}
.货柜-2{
宽度：100%；
高度：100vh；
背景色：rgb（46,6,6）；
}
.盒式集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
宽度：100%；
身高：100%；
}
.box1{
背景色：rgb（65186186）；
宽度：50%；
身高：100%；
}
.box2{
背景色：rgb（92191124）；
宽度：50%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
@介质（最大宽度：600px）{
.box1{
背景色：rgb（65186186）；
宽度：100%；
身高：50%；
}
.box2{
背景色：rgb（92191124）；
宽度：100%；
身高：50%；
}
}

---

您的问题是因为您将内联CSS设置为

高度：50%

到

.box1

在

#box

内，垂直（在移动视图中）总计为

200%

，因此覆盖了

.container-2

，因此在移动视图中设置为

25%

正文{
保证金：0；
宽度：100%；
}
.集装箱{
宽度：100%；
高度：100vh；
背景色：rgb（152152152）；
}
.货柜-2{
宽度：100%；
高度：100vh；
背景色：rgb（46,6,6）；
}
.盒式集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
宽度：100%；
身高：100%；
}
.box1{
背景色：rgb（65186186）；
宽度：50%；
身高：100%；
}
.box2{
背景色：rgb（92191124）；
宽度：50%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
#盒子，盒子1{
身高：50%
}
#第1框：第n个子项（3n+1）{
背景：蓝色
}
#第1框：第n个子项（n+2）：第n个子项（-n+3）{
背景：红色
}
@介质（最大宽度：600px）{
#盒子，盒子1{
身高：25%
}
.box1{
背景色：rgb（65186186）；
宽度：100%；
身高：50%；
}
.box2{
背景色：rgb（92191124）；
宽度：100%；
身高：50%；
}
}

我已经测试了你的代码，我不清楚你有什么问题。在我看来这很有效，但现在仍然是凌晨3点，所以可能对我没有帮助。box2中的盒子在移动视图中覆盖了容器2。我在移动视图中进行了测试，我可以完美地看到

容器2

背景颜色是的，但它被box2中的盒子覆盖了一半。我希望容器2完全可见，但box2中的盒子覆盖了它。我不希望box2中的盒子大小有任何不同，我只希望将容器2向下推，以便它在移动设备中完全可见。我希望box2中的盒子在移动设备视图中折叠到box1下方，就像它们以前那样。我只是想让container2在框2中的框中仍然100%可见。我只是在我的代码片段中看到了，不是吗？container（使用box1+box2）然后container2，我的代码片段就是这样做的。是的，你很抱歉，我尝试在堆栈溢出上测试代码，但它没有正常工作，所以我把它放在实际文档中，它工作了，谢谢！！现在，我如何在移动设备中使box2中的盒子更大，但不覆盖container-2？我是说如果你想回答这个问题。