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

html-css022

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

margin拖拽，又叫 margin-top传递

父子级包含的时候子级的margin-top会传递给父级(会传给最后一层父级)

解决方案

1.父级给padding-top(推荐)

2.给父级加overflow:hidden子级加margin-top

3.给父级加border:1px solid red子级加margin-top