0

我正在尝试使用 3 个可调整大小的 div 构建一个页面。第一个在左边，叫做“middle_explorer” 第二个在底部，叫做“middle_console” 最后一个在左边，叫做“middle_info”

问题是，当我尝试调整第二个和最后一个的大小时，它们仍然不在应有的位置...自己看一下这里

这是我的页面：

<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 在调整大小时保持在左侧，但另外两个没有，我真的不明白我做错了什么。

4

0 回答 0