大佬教程收集整理的这篇文章主要介绍了媒体查询将 flex-direction 设置为 column 后 Div 消失,可能是因为 flex 属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我想使用 flex-Box 制作一些重叠的内容。在宽屏上,flex-direction 设置为 row,但在较小的屏幕上,我想将其更改为 column。
body {
min-height: 100vh;
BACkground-color: #d6bd9e;
display: flex;
align-items: center;
justify-content: center;
}
.container {
wIDth: 90%;
max-wIDth: 960px;
display: flex;
justify-content: center;
align-items: center;
}
.left {
border: 2px solID green;
flex: 1 40%;
wIDth: 40%;
height: 30rem;
BACkground: url("https://imageS.Unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb- 1.2.1&ixID=MXwxMjA3fdb8MHxleHBsb3JlLWZlZWR8MXx8fGVufdb8fHw%3D&w=1000&q=80") no-repeat;
BACkground-size: cover;
border-radius: 8px;
}
.right {
min-height: 20rem;
flex: 1 50%;
BACkground-color: #4d6d52;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5em;
border-radius: 8px;
margin-left: -4em;
}
@media(max-wIDth: 500pX) {
.container {
wIDth: 100%;
flex-direction: column;
}
.left {
wIDth: 90%;
}
.right {
min-height: 14rem;
margin: 0;
margin-top: -6em;
BACkground: transparent;
}
}
<div class="container">
<div class="left"></div>
<div class="right">
<h1 class="heading">
This is a heading!
</h1>
<p class="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste nihil,quasi eos aspernatur doloribus quos consequatur animi. In,nemo!
</p>
</div>
</div>
我还将 .right 的背景设置为透明,以便我可以看到我的 div 仍然存在(我可以看到绿色边框),但背景图像似乎丢失了。 我很确定它与 flex: 1 40%;我一开始在 .left 中设置的,因为当我摆脱这个 flex 属性时,它似乎工作。但我的问题是: 当我改变 flex-direction 时,为什么 .left div 基本上会崩溃? 我做了一些研究,唯一发现的是我必须为 div 设置一个高度,但正如你在我的代码中看到的,我的 .left 已经有了一个高度。所以我确定它与我的 .left 的 flex 属性有关。
如果我理解正确,当您达到媒体查询宽度时,背景图像会折叠但由于绿色边框而不会完全消失。
我在媒体代码和原始容器选择器中向容器添加了高度属性,现在图像没有消失。还要确保将元标记添加到您的 html head 标记中!希望这会有所帮助!
HTML
<meta name="viewport" content="width=device-width,initial-scale=1">
CSS
body{
min-height: 100vh;
BACkground-color:#d6bd9e;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 90%;
height: 100vh;
max-width: 960px;
display: flex;
justify-content: center;
align-items: center;
}
.left{
border: 2px solid green;
flex: 1 40%;
width: 40%;
height: 30rem;
BACkground: url("https://imageS.Unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb- 1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80") no-repeat;
BACkground-size: cover;
border-radius: 8px;
}
.right{
min-height: 20rem;
flex: 1 50%;
BACkground-color: #4d6d52;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5em;
border-radius: 8px;
margin-left: -4em;
}
@media all and (max-width: 500pX){
.container{
width: 100%;
flex-direction: column;
height: 80vh;
}
.left{
width: 90%;
}
.right{
width: 75%;
min-height: 14rem;
margin: 0;
margin-top: -6em;
}
}
以上是大佬教程为你收集整理的媒体查询将 flex-direction 设置为 column 后 Div 消失,可能是因为 flex 属性全部内容,希望文章能够帮你解决媒体查询将 flex-direction 设置为 column 后 Div 消失,可能是因为 flex 属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。