Question

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

这是问题的 jsFiddle 。

基本上，我有一个父容器 - .tab - 和3个子div。 .content1，.content2和.content3。当.content1使用“alsoInverResize”函数调整大小时，.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上窗口或父级的比例，或者让它们恢复到原来的百分比大小，但保持可调整大小的功能。

调整浮动元素的大小，可以使用JQuery UI Resizable调整大小，在窗口大小调整大小以适合其父容器

0 个答案: