以下演示效果配合 纯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