当内容换行为多行[闭合]时,浮点数的宽度不再缩小以适应

CSS 2.1第10.3.5节浮动、非替换元素( http://www.w3.org/TR/CSS21/visudet.html#float-width )他说:

width=min(max(首选最小宽度,可用宽度),首选宽度)

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

这对于文本换行的情况是完全合理的(想象一下,如果宽度根据行尾离可用空间边缘的距离而变化),但不是你想要的。不过,我看不出有什么办法可以避免这种情况。

我遇到了这个问题,因为父div的最大wdith导致一段文本被包装。右边的边界并没有缩小。

这是一个JS解决方案:

删除所有内容上的浮点数,将照片内联,然后将背景移动到包装器div中,并添加一个jquery单行代码进行修复:

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

代码如下:

http://jsbin.com/odeya3