Html，css水平和垂直拆分器

Question

我想创建一个与此类似的拆分器。 但我希望它同时水平和垂直工作。这是一张关于这个概念的图片。所以这有点像jsfiddle的工作方式，但我也想单独控制垂直线。

我只需要如何使用html和css解决它的想法。我将用javascript解决拆分器的运动。

感谢

Answer 1

我认为解决此问题的最佳方法是使用 on-resize 事件并根据固定限制动态计算元素的宽度和高度。我做了一些概念验证，使用jQuery和jQueryUI(用于调整大小(。这个概念的核心是：

$("#a").resizable({
//listen to the event of resize
resize: function() {
//calculate and set the new widths and heights of the elements
$("#b").width(500 - $(this).width());
...
}
});

这是：http://jsfiddle.net/cxfghe0a/25/

以下是所用元素的参考：

• https://api.jquery.com/resize/
• https://api.jquery.com/width/
• http://jqueryui.com/resizable/