时间戳

首页 > 解决方案 > 使绝对定位的轮播响应

html - 使绝对定位的轮播响应

问题描述

我在网页上有一个轮播，我在 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;
}

标签： htmlcss

解决方案

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>

推荐阅读