html、css水平和垂直分割器

Question

我想创建一个类似于 this 的拆分器.但我希望它同时水平和垂直工作。 Here是关于概念的图片。所以有点像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/