以下演示效果配合
纯css实现多栏拖动大小
食用更好理解~
demo-1 左右布局
简单的左右布局。当左右拉动到
极限时松开鼠标
,就无法重新拉回去
slide
main
demo-2 左右布局升级版
效果同demo-1,问题也同demo-1。唯一的区别就是右边修改了resize的方向
slide
main
slide
demo-3 上下左右拖动布局
添加上下拖动后,需要注意 .resize 的位置,和注意让 .resize 贴近边界
header
slide
main
slide
demo-4 比较完善的demo
这个实现并不是纯css了,借助了一点点js。解决了拖动到极限后无法重新拖动的问题(除了底部拖动到极限的的时候会无限增加底部距离问题)
header
slide
main
slide