当内容包装到多行时,float的宽度不再缩小以适应[关闭]

问题描述 投票:7回答:2

这是一个test file

将窗口大小调整到足以容纳所有四个盒子。请注意,容器并不像预期的那样宽。

将窗口大小调整到足够小,以使框在多行上。请注意,容器是页面的整个宽度(这是无意的)。

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

(见Firefox 3.5和Chrome 4.0.221.8。如果解决方案在IE6中不起作用,那很好。)

css css-float width
2个回答
5
投票

CSS 2.1第10.3.5节浮动,未替换元素(http://www.w3.org/TR/CSS21/visudet.html#float-width)表示:

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

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

对于文本换行的情况,这是完全理智的(想象一下,如果宽度根据线端到达可用空间边缘的距离而改变),而不是你想要的。但是,我看不出有办法避免这种情况。


1
投票

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

这是一个JS解决方案:

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

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

这是代码:

http://jsbin.com/odeya3

© www.soinside.com 2019 - 2024. All rights reserved.