css3技术

如何成功定义容器的max-width最大宽度?_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-27 19:13 我要评论( )

如何成功定义容器的max-width最大宽度?,学习如何成功定义容器的max-width最大宽度?,如何成功定义容器的max-width最大宽度?,查看如何成功定义容器的max-width

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

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

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

div css xhtml xml Example Source Code

Example Source Code []

  width:expression(document.body.clientWidth > 500? "500px": "auto" );


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

div css xhtml xml Source Code to Run

Source Code to Run []


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


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

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

  或许你认为这段代码的意义不大,只能设置最大宽度却不能设置最小宽度。试想我们追求某种效果,应用了动态布局,在页面中的某一个区域,目前的宽度在400左右,这是针对于1024*768的浏览器的。而当1600*1200宽度的用户访问的时候,这一区域的宽度达到了600左右,此时,你的布局因为此变化而不能浏览或非常难堪,此时这一效果就派上用场了。当然,还有其它的用法,这要靠细心的你去发现了,若有更好的用处,别忘了来发布。
  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评