ここにテストファイルがあります。
ウィンドウのサイズを変更して、4 つのボックスすべてを表示できる幅にします。意図したとおり、コンテナーはボックスよりも広くないことに注意してください。
ウィンドウのサイズを変更して、ボックスが複数の行に表示されるように十分に小さくします。コンテナーがページの全幅であることに注意してください (これは意図したものではありません)。
なんで？ボックスのサイズに依存しない方法でこれを防ぐことは可能ですか?
(Firefox 3.5 と Chrome 4.0.221.8 で見られます。解決策が IE6 で機能しない場合でも問題ありません。)
CSS 2.1 セクション 10.3.5 フローティング、置換されていない要素 ( http://www.w3.org/TR/CSS21/visudet.html#float-width ) は次のように述べています。
width = min(max(推奨される最小幅、使用可能な幅)、推奨される幅)
これは、テキストの折り返しの場合にはまったく問題ありませんが (行末が使用可能なスペースの端にどれだけ近づいたかによって幅が変化した場合を想像してください)、ここで必要なものではありません。ただし、これを回避する方法はわかりません。
親 div の最大幅が原因で、テキストの範囲が折り返されているときにこの問題が発生しました。境界線は右側で縮小していませんでした。
これがJSソリューションです：
すべてのフロートを削除し、写真をインラインにしてから、背景をラッパー div に移動し、jquery ワンライナーを追加して修正します。
<script>$('#galleryWrapper').width($('.gallery').width());</script>
コードは次のとおりです。