Question

我有两个宽度为45％的div，它们彼此相邻。

<div class="rightbox"> text </div><div class="leftbox"> text </div>


.rightbox {
margin-top:40px;
border:1px solid red;
float:right;
width:45%;
height:500px;
background-color:rgba(155,195,207,1);
}

.leftbox {
margin-top:40px;
border:1px solid black;
float:left;
width:45%;
height:500px;
background-color:rgba(155,195,207,1);
}

如何让右栏响应地下拉到左栏下方

Answer 1

定义@media对要放弃框的屏幕的查询。

例如，你必须在480的屏幕之后执行它，然后css应该是

@media all and (max-width:480px){
    .rightbox, .leftbox{
        float:none;
        width:100%;
    }
}

仅当屏幕宽度小于或等于480px时，此css才适用;

要在@media次查询的所有设备上获得完美结果，您还需要使用视口元标记检测屏幕宽度，然后只有@media个查询才能正常工作。

元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使两个百分比响应

1 个答案: