Question

我正在尝试构建一个包含3个可调整大小的div的页面。第一个位于左侧，称为“middle_explorer” 第二个位于底部，称为“middle_console” 最后一个位于左侧，称为“middle_info”

问题在于，当我尝试调整第二个和最后一个时，它们仍然不在他们应该的位置...... 亲自看看here

这是我的页面：

<header>
        <div id="header_logo">header_logo</div>
        <div id="header_controls">header_controls</div>
    </header>
    <section id="middle">
        <div id="middle_controls">middle_controls</div>
        <div id="middle_workarea">
            <div id="middle_explorer" class="sidebar">middle_explorer</div>
            <div id="middle_main">
                <div id="middle_codecontainer">middle_codecontainer</div>
                <div id="middle_console">middle_console</div>
            </div>
            <div id="middle_info" class="sidebar">middle_info</div>
        </div>
    </section>
    <footer>
        <div id="footer_date"></div>
    </footer>

例如，某些css属性由js，＃middle_main的宽度设置。这是我的css：

#middle_info{
    width: 150px;
    max-width: 250px;
    float: left;
}
#middle_codecontainer{
    /* Width is determined by acpUi.js */
}
#middle_console{
    width: 100%;
    height: 25px;
    background: white;
    padding: 2px;
}
#middle_main{
    /* Width is determined by acpUi.js */
    height: 100%;
    float: left;
    background-image: url('res/bkg02.png');
    background-attachment:fixed;
}
#middle_workarea{
    /* Height is determined by acpUi.js */
}
#middle_explorer{
    width: 200px;
    max-width: 400px;
    float: left;
}

以下是我刚才谈到的代码：

/* Adjust the #middle height according to the header and the footer */
function middleHeight () {
    $("#middle").height($(document).height() - $("header").height() - $("footer").height());
}
/* Adjust the #middle_workarea height according to the #middle_controls div height (37px) */
function workareaHeight () {
    $("#middle_workarea").height($("#middle").height() - 37);
}
/* Adjust the #code_main width according to the #middle_explorer, #middle_info */
function mainWidth () {
    var width = ($("#middle_workarea").width() - $("#middle_explorer").width() - $("#middle_info").width());
    $("#middle_main").width(width);
}
/* Adjust the #middle_codecontainer height */
function codecontainerHeight (){
    var height = ($("#middle_workarea").height() - $("#middle_console").height());
    $("#middle_codecontainer").height(height);
}

以下是我用来调整div可调整大小的代码：

$("#middle_explorer").resizable({ handles: "e"});
$("#middle_info").resizable({ handles: "w"});
$("#middle_console").resizable({ handles: "n", maxHeight: $("#middle_codecontainer").height()});

正如你所看到的，＃middle_explorer在调整大小时保持固定在左侧，但另外两个没有，我真的不明白我做错了什么。

jQuery resizable移动我的div

0 个答案: