当内容包装到多行时，float的宽度不再缩小以适应

Question

这是test file。

将窗口调整到足够宽以容纳所有四个框。请注意，容器并不像预期的那样宽。

将窗口调整到足够小，以使框在多行上。请注意，容器是页面的整个宽度（这是无意的）。

为什么呢？是否有可能以不依赖于盒子大小的方式来防止这种情况？

（见Firefox 3.5和Chrome 4.0.221.8。如果解决方案在IE6中不起作用，那很好。）

Answer 1

CSS 2.1第10.3.5节浮动，未替换的元素（http://www.w3.org/TR/CSS21/visudet.html#float-width）表示：

width = min（最大（首选最小宽度，可用宽度），首选宽度）

• 首选最小宽度=其中一个内盒的宽度，因为它们的大小都相同。
• 可用宽度=页面宽度减去边距/边框。
• 首选宽度=所有内盒并排的宽度。

对于文本换行的情况，这是完全理智的（想象一下，如果宽度根据线端到达可用空间边缘的距离而改变），而不是你想要的。但是，我看不出办法避免这种情况。

Answer 2

由于父div的max-wdith，我遇到了一个包装文本的问题。边界没有缩小到右边。

这是一个JS解决方案：

删除所有内容上的浮动并将照片内联，然后将背景移动到包装div并添加一个jquery单行修复：

<script>$('#galleryWrapper').width($('.gallery').width());</script>

以下是代码：

http://jsbin.com/odeya3