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

html-css025

使用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对浏览器资源要求比较高。