当内容换行为多行时，浮动宽度不再缩小以适应
这是一个测试文件。
调整窗口大小，使其足够宽以容纳所有四个盒子。请注意，按照预期，容器不比盒子宽。
将窗口大小调整到足够小，以使框位于多行上。请注意，容器是页面的整个宽度（这是无意的）。
为什么？是否可以通过不依赖盒子大小的方式来防止这种情况发生？
（在 Firefox 3.5 和 Chrome 4.0.221.8 上看到。如果解决方案在 IE6 中不起作用，那也没关系。）
Here is a test file.
Resize the window to be wide enough to hold all four boxes. Notice the container is no wider than the boxes, as intended.
Resize the window to be small enough that the boxes are on more than one line. Notice the container is the full width of the page (this is unintended).
Why? Is it possible to prevent this in a way that does not depend on the size of the boxes?
(Seen on Firefox 3.5 and Chrome 4.0.221.8. If a solution doesn't work in IE6, that's fine.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
CSS 2.1 第 10.3.5 节浮动、不可替换元素 (http:// www.w3.org/TR/CSS21/visudet.html#float-width) 表示：
width = min(max(首选最小宽度, 可用宽度), 首选宽度)
对于文本换行的情况来说，这是完全合理的（想象一下宽度是否根据行端与可用空间边缘的接近程度而变化），但不是您想要的。不过，我看不出有什么办法可以避免这种情况。
CSS 2.1 section 10.3.5 Floating, non-replaced elements (http://www.w3.org/TR/CSS21/visudet.html#float-width) says that:
width = min(max(preferred minimum width, available width), preferred width)
This is completely sane for cases of text wrapping (imagine if the width changed depending on how close the line ends got to the edge of the available space) but not what you want here. I can't see a way to avoid this, though.
我遇到了这个问题，因为父 div 的 max-wdith 导致文本范围被换行。右侧的边界并没有缩小。
这是一个 JS 解决方案：
删除所有内容上的浮动并使照片内联，然后将背景移动到包装 div 并添加 jquery 单行线来修复：
这是代码：
http ://jsbin.com/odeya3
I encountered this problem with a span of text that's wrapping because of a parent div's max-wdith. The border wasn't shrinking down on the right.
Here's a JS solution:
Remove the float on everything and make the photos inline, then move the background to a wrapper div and add a jquery one-liner to fix:
<script>$('#galleryWrapper').width($('.gallery').width());</script>Here's the code:
http://jsbin.com/odeya3