这是一个测试文件。
调整窗口的大小，使其足够宽以容纳所有四个框。请注意，容器不比盒子宽，正如预期的那样。
调整窗口的大小，使其足够小，以使框位于多行上。请注意，容器是页面的整个宽度（这是无意的）。
为什么？是否有可能以一种不依赖于盒子大小的方式来防止这种情况发生？
（在 Firefox 3.5 和 Chrome 4.0.221.8 上看到。如果解决方案在 IE6 中不起作用，那很好。）
问问题
1406 次
2 回答
5
CSS 2.1 section 10.3.5 Floating, non-replaced elements ( http://www.w3.org/TR/CSS21/visudet.html#float-width ) 说：
width = min(max(首选最小宽度，可用宽度)，首选宽度)
- 首选最小宽度=其中一个内盒的宽度，因为它们的大小都相同。
- 可用宽度 = 页面宽度减去边距/边框。
- 首选宽度 = 所有内盒并排的宽度。
这对于文本换行的情况是完全正常的（想象一下，如果宽度的变化取决于行尾与可用空间边缘的接近程度），但不是你想要的。不过，我看不到避免这种情况的方法。
于 2009-10-14T12:26:26.230 回答
1
由于父 div 的 max-wdith，我遇到了一个环绕文本的问题。右边的边界没有缩小。
这是一个JS解决方案：
删除所有内容的浮动并使照片内联，然后将背景移动到包装器 div 并添加一个 jquery one-liner 来修复：
<script>$('#galleryWrapper').width($('.gallery').width());</script>
这是代码：
于 2010-01-29T00:01:22.567 回答