我在网页上有一个轮播,其绝对定位在top:420px和left:640px上。我希望它在屏幕尺寸更改时折叠并变为垂直。我将媒体查询放在display:flex flex-direction:列中。滑块不会从其绝对位置移动。当屏幕尺寸较小时,有没有办法使它响应并折叠到列。
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
}
@media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.main div img {
max-width: 100%;
width: auto;
}
答案 0 :(得分:0)
display:flex
和flex-direction: column
仅影响div的内部排列。为了更改div的位置,您必须更改top
和left
的值。例如:
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
display: flex;
}
@media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 100px;
left: 100px;
}
}
.main div img {
max-width: 100%;
width: auto;
}
<div class="main">
<div>First div</div>
<div>Second div</div>
</div>