6

私は 2 つの div を持っていますが、(div 1) は左にフロートされ、(div 2) は右にフロートされます。ビューポートが変更されると、(div 1) が (div 2) の下に移動するレスポンシブ レイアウトを作成しています。簡単なイラストといくつかのコードのために、MS Paint を使用して簡単な画像を作成しました。また、どちらにも動的コンテンツが含まれているため、高さを固定してはなりません。

JavaScript は使用せず (可能であれば)、単純な CSS のみを使用します。div 2 を div 1 の下に配置する方法しか知りませんが、その逆は知りません。

どうすればこれを達成できるか知っている人はいますか？

ここに画像の説明を入力

HTML:

 <div id="div1 sidebar" style="float: left;">
   //dynamic content
 </div>

 <div id="div2 content" style="float: right;">
  //dynamic content
 </div>

HTML は自動生成されるため、マークアップでは、もともと div1 が div2 よりも先に来ます。多くのページが同じレイアウトを使用しているため、順序を変更する (div2 を div1 の上に配置する) ことはお勧めできません。上記のコードを参照してください

4

2 に答える 2

3

私の提案があります。divメディア クエリを使用して、並べて表示する最大幅を見つけます。

HTML に、次のdivように配置します (前の右のもの)。

<div class="div2">
    div 2
</div>
<div class="div1">
    div 1
</div>

それらを表示するために使用される css は次のdivようになります。

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

最後に、左をdiv右の下に表示するには、次のような CSS を追加する必要があります。

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

これは、このコーディングを示す jsfiddle です。divブラウザのサイズを変更するだけで、左が右のブラウザの下に表示されます。

于 2013-09-20T02:27:24.443 に答える
2

ビューポートのサイズを変更したい場所に合わせたときに、メディア クエリを使用して、これらの div のそれぞれに適用される CSS スタイルを変更します。次に、div 1 を右にフロートし、div 2 を左にフロートし、div 1 を次の行に押し下げるのに十分な大きさの右マージンを div 2 に与えます。

于 2013-09-20T02:43:04.473 に答える