Question

我确定这很明显......但我似乎无法弄明白。

当媒体宽度很小时，我需要两个div，而当它们很大时我需要彼此相邻。右边是固定宽度，左边是可变的。但是，当介质宽度较小时，它们的顺序错误。如果我在html中交换div，它们就不再排好了。

HTML

<div class="right"> right content fixed width </div>

<div class="left"> left navbar variable width </div>

CSS

.right {
    width: 200px;
    float: right;}

.left{
    margin-right: 200px;}


@media (max-width: 500px) {       
.left {
    width: 100%;}

.right { 
    width: 100%;}
}

Answer 1

我刚使用额外的包装div和display:table/table-cell（在媒体查询中设置回阻止）

http://jsfiddle.net/CwMTU/4/

Answer 2

更改<div>的订单

<div class="left">
   left navbar variable width
</div>

<div class="right">
    right content fixed width
</div>

并更改两个班级中的float。添加width:100%; margin-right -200px，以获得旁边的正确div。

.right {
    width: 200px;
    float: left;
    background:green;
}

.left{
    background:red;
    float:left;
    width:100%;
    margin-right:-200px;

}

JsFiddle更新为：

@media (max-width: 500px) {

.left {
    width: 100%;
    margin-right:0;             <--------
}

您的 JsFiddle ，但已更新

并排使用媒体查询提供错误的订单

2 个答案: