求解:块级元素的宽度自适应问题
2013-10-05 11:34
323 查看
1、写一个div,使它的width值为30px,height的值为auto;
2、在<div></div>标签之间先后分别加入一行长英文和长中文(无空格间隔的英文字母不会分行,中文会分行);
3、在IE6与IE7、IE8、Firefox、chrome浏览器中的效果截图分别如下:
IE6英文显示效果:
IE7、IE8、Firefox、chrome英文显示效果:
IE6、IE7、IE8、Firefox、chrome中文显示效果:
可以看到,在IE6、IE7、IE8、Firefox、chrome浏览器中,中文会分行,而无空格间隔的英文字母不会分行,当文字出现分行时,这些浏览器都会自动增加高度去适应两行文字的高度。但是宽度就不同了,在IE6中,div的宽度会自动增加去适应文字的宽度,而在IE7、IE8、Firefox、chrome等浏览器中,div却不会去自动适应文字的宽度,而是任由文字超出其宽度。如果不想让文字超出div的宽度,可以在div的样式中加上overflow:hidden,这样不但可以使得IE6、IE7、IE8、Firefox、chrome等浏览器中文字不超出div的宽度,而且可以去掉IE6中div自动适应文字宽度的功能。
但是:如果要在IE7、IE8、Firefox、chrome等浏览器中,不使用javascript,写出这种div自适应文字宽度的布局该怎么办呢?
尝试将div的width的值改为:auto,显示效果如下:
IE6、IE7、IE8、Firefox、chrome中width值改为auto的显示效果:
所有浏览器均显示div的宽度为浏览器宽度的100%;
2、在<div></div>标签之间先后分别加入一行长英文和长中文(无空格间隔的英文字母不会分行,中文会分行);
3、在IE6与IE7、IE8、Firefox、chrome浏览器中的效果截图分别如下:
IE6英文显示效果:
IE7、IE8、Firefox、chrome英文显示效果:
IE6、IE7、IE8、Firefox、chrome中文显示效果:
可以看到,在IE6、IE7、IE8、Firefox、chrome浏览器中,中文会分行,而无空格间隔的英文字母不会分行,当文字出现分行时,这些浏览器都会自动增加高度去适应两行文字的高度。但是宽度就不同了,在IE6中,div的宽度会自动增加去适应文字的宽度,而在IE7、IE8、Firefox、chrome等浏览器中,div却不会去自动适应文字的宽度,而是任由文字超出其宽度。如果不想让文字超出div的宽度,可以在div的样式中加上overflow:hidden,这样不但可以使得IE6、IE7、IE8、Firefox、chrome等浏览器中文字不超出div的宽度,而且可以去掉IE6中div自动适应文字宽度的功能。
但是:如果要在IE7、IE8、Firefox、chrome等浏览器中,不使用javascript,写出这种div自适应文字宽度的布局该怎么办呢?
尝试将div的width的值改为:auto,显示效果如下:
IE6、IE7、IE8、Firefox、chrome中width值改为auto的显示效果:
所有浏览器均显示div的宽度为浏览器宽度的100%;
相关文章推荐
- 说下Fedora下把SpiderMonkey放入Eclipse内编译的过程
- A Knight's Journey
- 爱是什么?
- MFC改变窗口风格的几种方法
- 求a+aa+aaa+aaaa+...的值
- 帝国cms中留言板的调用与修改
- 作业 1 熟悉C语言编程环境 心得与问题
- hdu4081 Qin Shi Huang's National Road System MST+树形DP
- 时分秒针重合
- 好过分的debug啊
- hdu 4286 Alice and Bob --贪心
- Oracle DB 使用快速恢复区
- 让CPU占用率曲线听你指挥
- RPM安装命令总结
- 树的遍历——pat1043
- 苹果告知Mac开发者Mavericks将支持教育类和企业类用户批量购买
- iPhone开发之UISearchBar学习
- 以太网 局域网 城域网 广域网
- 自动更新的一个小问题
- 给定无序自然数数组,求最大连续自然数个数,时间复杂度为O(n)