0

親 div 内の左フローティング div について 2 つの質問があります。これに5時間以上費やしてさまざまなことを試し、インターネットで検索しましたが、解決策が見つかりませんでした! ここの誰かが助けてくれるかもしれないと思った。

これはシナリオです:

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;"><label style="text-align:center"> This is the title div </label></div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div class="left_floating" style="height:20px; width:50px;"> 2 </div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>

問題 1: 私が望むもの: タイトルは、画面のサイズに関係なく、常に他の 3 つの div の中心にあるようにします。何が起こるか: 画面のサイズを縮小すると、div 3 に十分なスペースがない時点で、画面が下がります (これが私が望んでいることです) が、div 2 の右側にいくらかのギャップが残ります。これにより、親 div の幅が 100px よりも大きくなります (div 1 の幅 + div 2 の幅)。つまり、親 div は側面からタイトではありません。これにより、タイトルが中心になくなります。どうすればこれを修正できますか?

問題 2: 私が望むもの: 画面が縮小して div 3 が下がると、div 1 の下に移動する必要があります。何が起こるか: div 2 の高さが div 1 の高さより小さいため、div 3 は div 2 の下に移動します。 div 2 の高さが div 1 の高さよりも大きい場合、結果は望ましい結果になります。助言がありますか？

もしあればCSSソリューションを好みます。

ありがとう

4

2 に答える 2

1

メディアクエリを使用して、目的を達成できます。提供したマークアップを使用した例を次に示します。http：//jsfiddle.net/VQMrY/1/

私が行ったCSSの変更に注意してください：ラベルをブロック要素にし、メディアクエリ（結果を表示する画面幅に基づく）。見やすくするために、要素の周囲に境界線を付けました。親コンテナにclrクラスも追加しました。

メディアクエリでは、div '2'を右にフロートするように設定してギャップがないようにし、次に'3'を設定して両方をクリアして'1'を下回ります。うまくいけば、これが役立ちます！

@media screen and (max-width: 3550px) {
 .second {float: right;}
 .third {clear: both;}

}

max-widthを、ブレークポイントが発生する場所に編集するだけです。

于 2013-02-04T20:55:56.080 に答える
1

問題 1 について: おそらく、メディア クエリを使用してこれに対処することをお勧めします。特定の解像度では、css を別の方法で動作させたいと思われますが、これにはメディア クエリが最適です。あなたはおそらく次のようなものが欲しいでしょう

@media (max-width: n px) {
    #parent_div {
        width: 100px;
    }

@media (min-width: n+1 px) {
    #parent_div {
        width: 150px;
    }

問題 2 について: div 2 をラップする div を作成して、div 3 が適切に浮動するように静的な高さを大きくすることができます。ラッパーを左にフロートさせ、div 2 をフロートさせないようにするだけです。

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;">
    <label style="text-align:center"> This is the title div </label>
</div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div style="float:left; height:50px; width:50px;">
    <div class="left_floating" style="float:none; height:20px; width:50px;"> 2 </div>
</div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>
于 2013-02-04T20:46:17.163 に答える