如何解决ie6, 7未定义宽度浮动元素无法换行的问题
1. 问题表现
比如一个列表, float以后, 而且列表每个元素width是自适应的.
在ie6, 7中, 在超过了一行以后, 且一行的宽度不能放下整数个元素时, 那么这个列表每行的最后1个或几个元素并不会自动排到第二行, 而是挤在行尾. 如下图:
具体代码表现看这里: http://jsbin.com/asohoq/1
2. 解决方案
给每个子元素加: white-space:nowrap; 即可解决. 具体代码看这里: http://jsbin.com/asohoq/2
3. white-space:nowrap;是什么意思
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
4. 课外知识
说到这里, 就有必要再了解一下white-space, word-break 和 word-wrap.
1). white-space处理元素内的空白;
2). word-break: 在某个固定宽度的div内, 如果有一个很长的英文单词到达边界, 设置属性 break-all时, 单词会被截断, 一部分显示在第一行, 另一部分显示到第二行;
3). word-wrap: 在 2) 的情况下, 设置 word-wrap:break-word 整个单词都会被挤到第二行.
