1

我无法解决浮动元素和 JQuery UI Resizable 和窗口调整大小事件的问题。

这是有问题的jsFiddle。

基本上，我有一个父容器 - .tab - 和 3 个子 div。.content1、.content2 和 .content3。当使用“alsoInverResize”函数调整 .content1 的大小时，.content2 和 content3 的大小都会成反比。

<div class="tab">
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
</div>

$(".container1").resizable({
    containment: "parent",
    handles: "s",
    alsoInverResize: ".container2, .container3",
    maxHeight: $(".tab").height()
});

尽管所有 3 个子 div 都以百分比宽度和高度开始以适合其父级，但当它们调整大小时，它们会得到平面大小，并且当您将窗口大小调整为小于原始大小时，它们会从父容器溢出，使 .container3在 .container2 下向左浮动，或者如果窗口的大小比原始大小大，则其宽度小于其父级。

我试图在窗口调整大小事件上再次设置百分比大小，但这会阻止可调整大小的插件甚至工作，显然不是预期的效果（http://jsfiddle.net/fh77N/2/）：

$(".container1").css({"height" : "50%", "width" : "100%"});
$(".container3").css({"height" : "50%", "width" : "70%"});
$(".container2").css({"height" : "50%", "width" : "30%"});

我想让三个子容器的大小相等，调整为 window.resize 上的窗口或父级的比例，或者让它们恢复到原来的百分比大小，但保持可调整大小的功能。

4

0 回答 0