html - 2つのdivを並べますが、画面が小さすぎる場合は、右側のdivを左側のdivの上に配置します。

Question

質問のタイトルはそれをほぼ要約しています。次のように2つのdivを並べて配置することは可能かどうか疑問に思っています。

DIV＃1 | DIV＃2

しかし、画面が小さすぎる場合（たとえば、モバイルデバイスの場合）、これを実行したいと思います。

DIV＃2

DIV＃1

つまり、DIV＃2ではなくDIV＃1が下にスライドします

乾杯、ベン。

Answer 1

おそらく、divを並べて配置するためにフロートを使用します。画面が小さすぎる場合は、@media-queriesを使用してこの動作を変更してください。CSSファイル内：

@media only screen and (max-width: 480px) {
    /* when window size is below 480px */
    div {
        float: none;
    }
}

これは、ウィンドウサイズが480pxより小さい場合に、float：noneをWebサイト上のすべてのdivに設定する単なる例です。あなたが望むものを達成するためにそれを調整してください:)

Answer 2

CSS メディア クエリを使用して、配置の画面サイズを確認できます。

たとえば、通常の CSS では両方の要素が左にフローティングされますが、320px スタイルではそれらがフローティングされません。

min-width および max-width ディレクティブを使用して、これを確認できます

<link rel='stylesheet' media='screen and (min-width: 401px) and (max-width: 900px)' href='css/medium.css' />

詳細はこちら - http://css-tricks.com/css-media-queries/