css – 当内容换行到多行时,float的宽度不再缩小以适应

前端之家收集整理的这篇文章主要介绍了css – 当内容换行到多行时,float的宽度不再缩小以适应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个 test file.

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

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

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

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

解决方法

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

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

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

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

原文链接:https://www.f2er.com/css/215169.html

猜你在找的CSS相关文章