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

Question

Example of the divider

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

我想创建类似于此的东西，其中可以拖动分隔符来调整左右div的大小，并且这些div中的任何内容都将被拟合。怎么办呢？

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

Answer 1

使用JQuery UI可能是实现此目的的最可靠方式。以下是您可以从中开始的示例：A full page layout with resizable panes using jQuery UI

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

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