当内容包装成多行时，浮动的宽度不再缩小以适合

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）说， ：

宽度= MIN（MAX（优选的最小宽度，可用宽度），优选的宽度）

• 优选的最小宽度=的内框之一的宽度，因为他们都具有相同的尺寸。
• 可用宽度=页面宽度减去边距/边框。
• 首选宽度=所有内部盒子的宽度并排。

对于文字环绕的情况，这是完全理智的（想象一下，如果宽度的改变取决于行结束到可用空间边缘的距离）而不是你想要的。虽然我看不到避免这种情况的方法。

Answer 2

我遇到了这个问题，因为父div的max-wdith包装了一段文本。边界没有在右边缩小。

这里有一个JS的解决方案：

卸下一切的浮动，使照片联机，然后将背景的包装DIV，并添加一个jQuery的一行来解决：

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

下面的代码：

http://jsbin.com/odeya3

Answer 3

您可以使用媒体查询本。 请参阅http://css-tricks.com/css-media-queries/