响应式布局:如何在智能手机布局中切换位置

Question

我如何才能解决这个响应式布局案例:我有三个框。在宽屏幕上，我想要两个在左边，一个固定宽度，另一个在右边。在小屏幕上，我希望所有的框都变成100%，并且正确的一个在其他两个之间。

我已经做了一个几乎可以工作的小提琴，但我需要在宽模式下摆脱这种差距。

https://jsfiddle.net/ypmgo7no/3/

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:50px;
}

.right {
  margin-left:220px;
  background:yellow;
  height:100px;
}

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }

   .right {
     margin-left:0;
     }
}

看到问题：(对不起，我刚刚意识到图片中的“宽模式”和“小模式”是互换的) Image

Answer 1

你想要这样吗？

​

.leftfixed {
  float:none;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    left: 220px;
    background: yellow;
    height: 200px;
    position: absolute;
    width: 100%;
    top: 7px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
     position:inherit;
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed">
box left fixed width 2
</div>

​

Answer 2

这是我在最后一个div中添加类bottom，并在原始代码中添加position:relative和bottom:100px的另一个方法。

​

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    margin-left: 220px;
    background: yellow;
    height: 200px;
    /*position: absolute;*/
    width: 100%;
    top: 7px;
  }
  .bottom{
  	    position: relative;
    	bottom: 100px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
   
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed bottom">
box left fixed width 2
</div>

​