如何创建垂直拖动以调整大小的分隔线？

Question

分频器示例

可以拖动中心分隔线来调整左右 div 的大小。似乎拖动分隔线会将 CSSwidth值更改为百分比，但我不知道是什么导致该值发生变化。

我想创建与此类似的东西，其中可以拖动分隔线来调整左右 div 的大小，并且这些 div 中的任何内容都将被拟合。如何才能做到这一点？

要避免的潜在兼容性问题：最终，我还想让它在移动屏幕上响应，使用@media在左侧可见时隐藏右侧 div，并在右侧可见时隐藏左侧 div。

Answer 1

使用 JQuery UI 可能是实现这一目标的最简单方法。以下是如何开始的示例：使用 jQuery UI 的带有可调整大小窗格的完整页面布局

另外，查看 CSS resize 属性：http://www.w3schools.com/cssref/css3_pr_resize.asp

我不认为这正是你想要的，但你可以将它与一些 css 结合起来，在没有 JavaScript 的情况下达到类似的效果。