内部DIV包装在拆分窗格场景中(jQueryUI可调整大小)

时间:2016-11-07 14:23:12

标签: html css jquery-ui

受到基于jQueryUI可调整大小的互联网上的示例的启发,我试图进一步将一些DIV嵌套到拆分窗格中,但是,只要我添加嵌套div,右侧就会包含到下一行。< / p>

HTML: -

content

CSS: -

href="http://www.correctlink.com" <= nope
href="www.correctlink.com" <= nope
href="https://www.correctlink.com" <= nope
href="ftp://www.correctlink.com" <= nope
href="linkthatiwouldliketofind.com" <= yeah this one!

JavaScript(OnLoad): -

<div id="splitter">
  <div id="one">
    <!--div id="nested" /-->
  </div>
  <div id="two" />
</div>

的结果: -

我需要添加/更改什么才能让分割窗格在添加内容时正常工作?

1 个答案:

答案 0 :(得分:0)

通过使用外部弹性框而不是内部浮动来解决:https://jsfiddle.net/Lgwtn0nk/7/

/*
    Examples:
        int2str( str2int("test") ) == "test" // true
        int2str( str2int("t€st") ) // "t¬st", because "€".charCodeAt(0) is 8364, will be AND'ed with 0xff
    Limitations:
        max 4 chars, so it fits into an integer
*/
function str2int(the_str) {
    var ret = 0;
    var len = the_str.length;
    if (len >= 1) ret += (the_str.charCodeAt(0) & 0xff) <<  0;
    if (len >= 2) ret += (the_str.charCodeAt(1) & 0xff) <<  8;
    if (len >= 3) ret += (the_str.charCodeAt(2) & 0xff) << 16;
    if (len >= 4) ret += (the_str.charCodeAt(3) & 0xff) << 24;
    return ret;
}
function int2str(the_int) {
    var tmp = [
        (the_int & 0x000000ff) >>  0,
        (the_int & 0x0000ff00) >>  8,
        (the_int & 0x00ff0000) >> 16,
        (the_int & 0xff000000) >> 24
    ];
    var ret = "";
    for (var i=0; i<4; i++) {
        if (tmp[i] == 0)
            break;
        ret += String.fromCharCode(tmp[i]);
    }
    return ret;
}