これがコードです。
<div style="overflow:hidden; width:800px;">
<div style="float:left; width:500px;">
first text
</div>
<div style="float:left; width:300px;">
second text
</div>
</div>
width:300px;ご覧のとおり、2番目のdivが残りの適切なスペースを占めるように使用します。適切なスペース全体を占めるようにするための別のオプションは何ですか？設定width:100%;はジャンプダウンするので役に立ちません。私が尋ねる理由は、800-500 = 300（px）を数えなければならないたびです。500pxが550pxに変更されたら、に変更する必要300pxがあり250pxます。幅を設定するより良い方法があると思います。ありがとうございました。
この問題の一般的な解決策は、
このパターンを組み込むように変更されたコードは次のとおりです。
<div style="overflow: hidden;">
<div style="float: left; width: 500px;">
first text
</div>
<div style="display: block; margin-left: 500px;">
second text
</div>
</div>
コンテナーから 800px 幅を削除しました。追加し直すことはできますが、そのようなことはこのソリューションの目的に反します。800px の固定幅を設定する場合、右側のものは常に 300px になります。ここでは、JS Bin で実行しています。
これにより、正しい要素が残りのスペースを占有するという効果が得られますが (ブラウザーの幅をサイズ変更することで機能することがわかります)、同期を維持するために 2 つの場所で幅を変更する必要があります: (1) float の幅、および (2) ブロックの左マージン。ただし、減算が含まれていないため、これはソリューションよりも少し簡単です。両方の場所で同じ値を使用します。(これは、どの単位でも機能することも意味します: em、px、%。)
補足として、overflow: hiddenフロートを含むために使用しないことを常にお勧めします。数か月後にクリッピング効果が発生する可能性があり、それがここで使用したためであることを覚えていないためですoverflow: hidden。「clearfix」のどの方法が最適ですか?で代替ソリューションを参照してください。
このマークアップの方がうまくいくと思いますhttp://jsbin.com/apubay/1/edit