论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

如何成功定义容器的max-width最大宽度?

文章类别:div+css布局 | 发表日期:2008-9-26 11:13:26

  
  我们首先需要了解一种坏情况的存在,主流浏览器IE对max-width是不支持的,对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的。

  这里有一种方法,可以在IE中实现max-width最大宽度的效果,并在FF中也测试通过,我需要说明的是,这一个方法只能是max-width单独存在,也就是说,只能设置容器的最大宽度,也不能对此容器设置最小宽度,假如你想试试的话,结果只有一个,IE不知道怎么办了,程序出错!假如你有更好的办法,欢迎你来我的主页21shipin.com给我留言。

  我们是通过脚本的方法来设置max-width。我们没有写出单独的脚本代码,我们将脚本通过expression直接嵌入在CSS文件中。主是要的代码是:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
  width:expression(document.body.clientWidth > 500? "500px": "auto" );

  我们看下面代码的运行效果:(改变你的浏览器的宽度以查看变化)

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们设置了容器woaicss的宽度为:width:100%; 其实这是一句废话,因为DIV是块元素,默认的宽度就是父级元素的宽度。此例中div宽度,若不进行声明则等同于body的宽度。

  我们设置容器的max-width为500px。这对于FF来说是有效的。而对于IE则没有作用。
  面对没有效果的IE,我们应用expression嵌入脚本,声明了当宽度大于500px的时候,宽度就等于500px。

  或许你认为这段代码的意义不大,只能设置最大宽度却不能设置最小宽度。试想我们追求某种效果,应用了动态布局,在页面中的某一个区域,目前的宽度在400左右,这是针对于1024*768的浏览器的。而当1600*1200宽度的用户访问的时候,这一区域的宽度达到了600左右,此时,你的布局因为此变化而不能浏览或非常难堪,此时这一效果就派上用场了。当然,还有其它的用法,这要靠细心的你去发现了,若有更好的用处,别忘了来21shipin.com发布。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058