html - ページのサイズ変更によりインラインブロック div の場所が変更されたときに遷移を作成する

Question

Web サイトに css3 デザインを追加しようとしています。

次の css クラスで配置されている 2 つのdiv要素があります。

.formDiv {
   vertical-align:top;
   padding-left:10px;
   display:inline-block;
}

次のテストコードを使用します。

 <body>
    <div class="formDiv">TestA</div>
    <div class="formDiv">TestB</Div>
    ...

ただし、このコードを使用すると、両方の div が同じ x 軸の同じ行に表示されます。

両方の div のスペースがなくなるまで x 軸でブラウザーのサイズを変更すると、2 番目の div が最初の div の下に下がります。

私の質問は、1 番目の div の下に移動する 2 番目の div の動きが遷移アニメーションになるように構成できますか?

たとえば、ブラウザウィンドウのサイズを変更すると、2 番目の div が最初の div の下に移動するのに 2 秒かかり、そこに表示されるだけでなく、アニメーションで発生するように構成したいと考えています。

divクラスに以下を追加してみました

    -webkit-transition: all 1s linear;

しかし、それは仕事をしていないようです。

何か案は？

ありがとう！

score 3 · Accepted Answer

必要な種類の効果は、CSSメディアクエリによって実現できます。

ウィンドウのサイズを変更して、「スーパーチーム」リストで変更を確認してください。これを使用して、必要な効果を作成できます。

メディアクエリとレスポンシブウェブデザインの例。サイズを変更して、ウィンドウサイズにどのように適応するかを確認します。

これを参照してください、http：//jsfiddle.net/Mke7E/

html - ページのサイズ変更によりインライン ブロック div の場所が変更されたときに遷移を作成する