<div"> <div"> <div" />

ページのサイズを変更するとフローティングdivが停止する

Ok, so I have a 3 column floating divs. All are set float:left

  1. 左divの幅が固定されている
  2. 中位のdivがウィンドウでサイズ変更されます
  3. 右のdivは固定幅です

ウィンドウのサイズを変更して右の div が中央の div の下に下がるまで、

enter image description here

enter image description here

ここにいくつかのコードスニペットがあります

<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:600px;max-width: 65%">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="width:265px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

.divContent{    
    margin : 16px 10px 5px;
}

.divContainer {
    float: left;
    margin: 0px 20px 20px 0px;
    padding-bottom: 10px;   
    background-color:#FFFFFF;
    border: 1px solid #CCC;
    box-shadow:4px 4px 13px #bbbbbb;
    -moz-box-shadow:4px 4px 13px #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

EDIT

これを実現するためには管理しましたが、中間の div と正しい div の間にはギャップがあり、適切な div 下に行く。私は63％以上の中間をリサイズできません。

body min-width = 1560px
<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:900px;width: 63%;">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:100px;max-width: 15%;float: right">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

enter image description here

4
追加された 編集された
ビュー: 8
源

5 答え

divContainerの最大幅をピクセルで指定します。

例えば。

max-width: 710px;

または、最大幅を53％に減らすこともできます。

2
追加された
源
これは動作しますが、中央のDIVは画面の残りの部分を埋めるわけではありませんので、より大きな解像度では画面の右側に空きスペースがあります
追加された 著者 Andre Escudero, 源

問題は、中間のdivの65％の幅が文書全体のためであり、文書のサイズが変更されたときに中間のdivが右のdifと重なるようにrezisedされ、下に移動することです。

私はこれが中間divのために働くべきだと思う：<div class="divContainer" style="min-width:600px;max-width: 90% - 565px">

I havn´t tried it out myself but i think that should work and if not, just try to lower the precentage from 90% to something smaller.

EDIT:
If you want to be able to make the window shorter than 565px wide you can try and set:

BODY {min-width:600px; }

2
追加された
源
％o.oから減算しますか？それは残念なことに、中間と右の両方のdivを最初のものの下に置くと思います=（
追加された 著者 Andre Escudero, 源
私はそれを修正することはできますが、画面がより大きい解像度であるときにはギャップがあります。最初の投稿で改訂されたコードをチェックする
追加された 著者 Andre Escudero, 源
少しだけ差し引いてみてください。例えば600とか、おそらく90％から70％に変更してください。それが動作するかどうかは分かりませんが、あなたが値を少し混乱させた場合、私はなぜそれがうまくいかないのでしょうか:)
追加された 著者 Mats Edvinsson, 源
ちなみに、middle-divの最小幅が600なら、他の2 divの幅と潜在的なパディングなどの幅を加えてください。そうすれば、私はBODYを設定します{最小幅：1200}
追加された 著者 Mats Edvinsson, 源
それがあなたの問題を解決した場合は、この投稿を回答としてマークしてください。 :)
追加された 著者 Mats Edvinsson, 源

中央のdivの最小幅+パーセンテージを設定すると、エラーが発生しやすくなります。

真ん中のものを試してみてはいかがですか？

<div class="divContainer" style="float: none; margin-left: 300px; margin-right: 300px">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

あなたの本質的にここでやっていることは、特に中央のdivを浮かべないことです（マージンが他の2つのものの下にスライドするようにしてから、両側をマージンにしてください）。中間のdivが正しいものの後ろにくるようにHTMLの順序を変更します。

0
追加された
源
これは中と右divを下に置き、中divは上に空白を入れます
追加された 著者 Andre Escudero, 源

1 div内の3つの列をすべて折り返し、ページ全体がこのサイズより小さくなるように最小幅を設定します。

0
追加された
源
私はそれを試みたが、右のdivはまだ下がる=（
追加された 著者 Andre Escudero, 源

SOLVED!!! I floated the first div to the left, the second one the to the right and the middle last no floats just margins based on right and left div width + padding+ margins

enter image description here

<div class="divContainer" style="width:300px;float: left;">
    <div class="divContent">[LEFT DIV StUFF HERE]</div>
</div>

<div class="divContainer" style="width: 250px;float: right;">
    <div class="divContent">[RIGHT DIV STUFF HERE]</div>
</div>

<div class="divWidget" id="clientStatusDiv" style="margin:0px 270px 0 310px;">
    <div class="divContent">[CENTER STUFF HERE]</div>
</div>

わーい！！！それはリサイズが素敵に見えるときにうまくいく！

0
追加された
源