使用CSS的resize属性实现左右拖拽改变布局大小

html-css016

使用CSS的resize属性实现左右拖拽改变布局大小,第1张

resize属性的具体用法可见MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

实现左右拖拽改变大小时:

HTML

此时的div会出现滚动边框,此时可拖拽的区域只有右下角的一小块。

此时需要将这个区域扩大可进行如下设置。

此时内部文字就被隐藏了,在实际使用时可以通过设置兄弟元素展示文字。

HTML:

CSS

效果链接: http://js.jirengu.com/voleracixe/2/edit

IE6不支持max-width,可以用

* html img{

width:expression(this.width>500?”500”:width)

}

来实现。

注:1:expression在FF下不支持

2:*html内的width不要带单位(px)。

3:width:expression(this.width>500?”500”:width)可同样换成width:expression(this.width>500?”500”:auto)

4:若不是非常特别的需要用到expression,一般不建议使用expression,因为expression对浏览器资源要求比较高。