Css 当内容换行到多行时，浮动宽度不再收缩以适合

这是一本书

调整窗口大小，使其足够宽以容纳所有四个框。请注意，容器的宽度不超过框的宽度，如预期的那样

调整窗口大小，使其足够小，使框位于多行上。请注意，容器是页面的全宽（这是无意的）

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

---

（可以在Firefox 3.5和Chrome 4.0.221.8上看到。如果解决方案在IE6中不起作用，那没关系。）

CSS 2.1第10.3.5节浮动的、未替换的元素（）说：

宽度=最小值（最大值（首选最小宽度、可用宽度）、首选宽度）

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

---

这对于文本换行的情况是完全合理的（想象一下，如果宽度根据行尾到可用空间边缘的距离而改变），但不是您想要的。但是，我无法找到避免这种情况的方法。

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

下面是一个JS解决方案：

删除所有内容上的浮动并使照片内联，然后将背景移动到包装器div，并添加jquery one liner来修复：

$（'#galleryWrapper'）.width（$（'.gallery'）.width（））

代码如下：

也许您可以再次发布“测试文件”。目前，没有它，这个问题变得毫无用处。@Kev我不明白为什么这个问题会被关闭。测试文件已经发布，现在正在运行，这个问题很有用以保持每个项目具有各自的子宽度。