0

ウィンドウのサイズを変更するとき、右の列を左の列の上に移動するにはどうすればよいですか? デフォルトの動作では、右の列が左の下にスライドします。

これが私の目標を示す図です。

より広いウィンドウ:

+++++++++++++++++++++++++

| | 左の列 | 右の列 |

+++++++++++++++++++++++++

そのレイアウトを生成するために使用される CSS は次のとおりです。

CSS

.left { 
  width:auto;
  overflow:hidden;
  float:none;
}
.right {
  width:500px;
  float:right
}

モバイルデバイスのような狭いウィンドウに表示したいものは次のとおりです。

++++++++++++++

| | 右の列 |

| | 左の列 |

++++++++++++++

メディア クエリが重要であることはわかっていますが、使用するコードがわかりません。何かアドバイス？

4

1 に答える 1

0

これを行う 1 つの方法は、メディア クエリと絶対配置を使用することです。JSFiddle で表示します。

メディア クエリに慣れていない場合は、基本的に「この特定の状況でこの CSS を適用する」と言います。絶対配置により、必要な場所に div を移動できます。

以下のコードでは、ビューが幅 700px 未満に縮小されたときに div をスライドさせます。Fiddle にこれを表示させるには、ブラウザー ウィンドウを縮小するか、遷移が表示されるまで [結果] パネルを縮小します。(私のコンピューターでは、結果パネルをスライドする際の遅延が大幅に少なくなりました)

CSS

#left {
  background: #eee;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  background: #ddd;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 200px;
}

@media screen and (max-width: 700px) {
  #left {
    background: #2f6497;
    top: 60px;
  }
  #right {
    background: #002d62;
    left: 0;
  }
}
于 2013-03-05T03:10:46.500 に答える