4

この質問は何百万回も聞かれましたが、特定のバージョンの解決策が見つからないようです。これが私が持っているものです：

<div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div1とdiv2は常に表示され、div3はたまにしか表示されません。div2とdiv3の幅は固定されています。div2と可能性のあるdiv3が占有していない残りのスペースをdiv1で埋めたい。上記の順序で左から右に表示したい（[div1] [div2] [div3]）。

誰かがこれを手伝うことができますか？

4

1 に答える 1

3

答え：

実際の動作を参照してください：http：//jsfiddle.net/C9Q3F/3/

<style>
    div { height:100px; }
    #div1 { background-color:red; }
    #div2 { background-color:blue; width:75px; float:right; }
    #div3 { background-color:green; width:100px; float:right; }
</style>
​
<div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</div>​

説明：

これが機能する理由は、divの順序が変更されたため、両方とも固定幅で、両方ともingでページに書き込みdiv2と書き込みを行うためです。したがって、書き込まれる時点（現在は最後）までに、デフォルトの100％幅が使用可能な幅の100％を埋めます。他のdivはすでにスペースを占有しているため、「使用可能な幅」が残っています。div3floatdiv1

その他の場合（たとえば、最後のdivがスペースを埋める）：

この質問/回答のように、最後のdivで最初のスペースではなく残りのスペースを埋めたい場合は、float:left;代わりに使用するように微調整しfloat:right;、divの順序と幅を変更します。これと同じ概念で問題なく機能します。

于 2012-11-08T03:45:52.520 に答える