Question

我想创建一个类似于this的拆分器。但我希望它同时在水平和垂直方向上工作。 Here是有关此概念的图片。因此，这有点像jsfiddle的工作方式，但我也想分别控制垂直线。

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

Thx

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/

以下是所用元素的参考：

HTML，CSS水平和垂直拆分器

1 个答案: