css：右浮动的div在改变它的位置时转到下一行答案

【问题标题】：css: right floated div goes to the next line when change its positioncss：右浮动的div在改变它的位置时转到下一行
【发布时间】：2016-01-01 23:36:25
【问题描述】：

当我在媒体规则中将 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;
    }

}

【问题讨论】：

标签： css css-float media-queries

【解决方案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：https://jsfiddle.net/cz57tzb8/22/

【讨论】：