Question

当我在媒体规则中将div的位置从固定更改为相对时，它会转到下一行而不是保持向右浮动。当我将位置更改为绝对位置时，它会覆盖页脚。你能帮我解决这个问题。

的jsfiddle： https://jsfiddle.net/EducateYourself/cz57tzb8/14/

HTML：

<div id="main">
<div id="left">
aaa
</div>
<div id="right">
bbb
</div>
</div>
<div id="footer">
ccc
</div>

的CSS：

#main {
    float: right;
    width: 798px;
    background-color:green;
}

#left {
    margin-top: 140px;
    float: left;
    width: 572px;
    background-color:yellow;
}

#right {
    margin: 140px 0px 0px 572px;
    float: right;
    width: 226px;
    position: fixed;
    background-color:red;
}
#footer {
    clear: both;
    height: 55px;
    width: 100%;
    background: blue;
    position: relative;
  z-index:-1;
}

@media screen and (max-height: 300px) {
    #right {
        margin: 156px 0px 0px 572px;
        float: right;
        width: 226px;
        position: relative;
    }

}

Answer 1

删除右边距

#right {
    margin: 140px 0px 0px 0px;
    float: right;
    width: 226px;
    position: relative;
    background-color: red;
}

还要在媒体查询中添加#left id样式，例如

@media screen and (max-height: 300px) {
    #right {
        margin: 140px 0px 0px 0px;
        float: right;
        width: 226px;
        position: relative;
    }
    #left{
      float:left;

    }

}

演示：https：what's the equivalent of jquery's 'trigger' method without jquery?

css：右浮动div在改变位置时进入下一行

1 个答案: