前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 如何解决ie6, 7未定义宽度浮动元素无法换行的问题

如何解决ie6, 7未定义宽度浮动元素无法换行的问题

发布者:前端集合 // 发布时间:2013-05-21 22:29:42 // 分类:前端集合 // 访问: 1,431 次 // 热度: 0人参与

1. 问题表现

比如一个列表, float以后, 而且列表每个元素width是自适应的.

在ie6, 7中, 在超过了一行以后, 且一行的宽度不能放下整数个元素时, 那么这个列表每行的最后1个或几个元素并不会自动排到第二行, 而是挤在行尾. 如下图:

image

具体代码表现看这里: 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 整个单词都会被挤到第二行.

Tags: 未定义宽度, 浮动元素, 无法换行

2013第二次骑行: 长途 [多图]>>  << EDM开发注意事项
Top