我试图弄清楚为什么我的div（由媒体查询进行CSS样式设置）在垂直堆叠时停留在页面底部/ strong> min-width: 500px。该页面包含一个居中的背景图像和一个中间的框，其中包含三个嵌套的div，这些框将分别显示三种类型的天气描述。此外，文本＆＃34;您的本地天气应用程序＆＃34; 会在包含所有div的框下方。我不知道为什么会这样做！最后，如何在每个盒子垂直堆叠时保持间隙？
以下是我的CodePen的链接：https://codepen.io/IDCoder/full/NwNOgq/
这是我的HTML代码：
<html>
<title></title>
<head></head>
<body>
<div class="container">
<div class="About">
<h2>Your Local Weather App</h2>
</div>
<div class="holder">
<div id="city">whatever
</div >
<div id="sky">whatever
</div>
<div id="windspeed">whatever
</div>
</div>
</div>
</body>
这是我的CSS代码：
.container{
text-align: center;
background: url(https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg) no-repeat fixed;
background-size: cover;
background-position: center;
/*background-color: blue;*/
width: 100%;
height: 500px;
margin: 0;
}
.About{
background-color: blue;
transform: translateY(650%)
}
h2{
color: white;
font-size: 1.5em;
}
.holder{
border: 3px;
background-color: rgba(0, 0, 0, .80);
width: 45%;
height: auto;
margin: auto;
padding: 10px;
border: 3px solid grey;
border-radius: 10px;
transform: translateY(250%);
position: relative;
}
#city, #sky, #windspeed{
transform: translateY(9%);
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:5px;
height: 30px;
width: 90%;
margin: auto;
padding-top: 5px ;
}
@media(min-width: 500px){
.holder{display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
提前感谢您的帮助！