Html，css水平和垂直拆分器

Question

Html，css水平和垂直拆分器

htmlcss

3

我想创建一个类似于这个的分割器，但我想让它同时在水平和垂直方向上工作。这里有一张关于概念的图片。所以这有点像jsfiddle的工作方式，但我也想单独控制垂直线。

我只需要用html和css解决它的思路。我将使用javascript解决分隔器的移动。

谢谢

- András Bagoly

1

我认为几何结构不太合适。 - wordbug

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user9886608 · 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/

以下是所使用元素的参考: