レスポンシブなレイアウト：スマートフォンレイアウトの位置を切り替える方法

Question

私はこのレスポンスのレイアウトケースを解決するにはどうすればいいですか： 私は3つのボックスを持っています。 ワイド画面では、左側に2つ、右側にもう一方の固定幅が必要です。 小さな画面では、すべてのボックスが100％になり、右側のボックスが他の2つの間になるようにします。

私はほとんどうまくいけば、私はワイドモードでそのギャップを取り除く必要があります。

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に下のクラスを追加し、位置を追加する別の方法である：あなたの元のコードで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{ 
 
    \t  position: relative; 
 
    \t 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>