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

html-css039

使用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

在CSS中: 

语法:

resize:none|both|horizontal|vertical

none:用户无法调整元素的尺寸。

both:用户可调整元素的高度和宽度。

horizontal:用户可调整元素的宽度。

vertical:用户可调整元素的高度。

注释:如果希望此属性生效,需要设置元素的overflow属性值是auto、hidden或scroll。

知识补充:

CSS3 Resizing

在 CSS3,resize 属性规定是否可由用户调整元素尺寸。

这个 div 元素可由用户调整尺寸(在 Firefox 4+、Chrome 以及 Safari 中)。

CSS 代码如下:

实例

规定 div 元素可由用户调整大小:

div

{

resize:both

overflow:auto

}

参考W3school-resize属性