0

固定親 div 内に 2 つの浮動 div があるとします。div は、
JQuery ドラッグ可能を使用してフロートに作成されました。DOM から最初の DIV を削除すると、その下にある 2 番目の DIV
が何らかの理由でページを上っているように見えます。

私はjsfiddleを作成しました。http://jsfiddle.net/k6yxu/1/

この例では、ボックス 1 を閉じると、ボックス 2 が上に移動します。これは、Chrome、Firefox、および IE 9 で発生します。

兄弟のいずれかが DOM から削除された場合でも、これらすべてのボックス (DIV) を同じ場所に保持したいと考えています。

<style>
html, body, #container {
    height: 100%;
}
body {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#container {
    position: relative;
}
#header, #footer {
    height: 40px;
    line-height: 40px;
    background: #999;
    width: 100%;
    position: absolute;
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}
/* This is the parent of inner-content div */
 #content {
    position: absolute;
    top: 40px;
    bottom: 40px;
    width: 100%;
    overflow: visible;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
}
/* This is the direct parent of all boxes */
 #inner-content {
    overflow: inherit;
    height: 100%;
}
.box {
    border: 4px solid #999;
    height: 120px;
    width: 120px;
}
.boxHeader {
    height: 32px;
    vertical-align: middle;
}
.boxCloseButton {
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
    margin-right: 4px;
    margin-top: 6px;
    float: right;
    font-size: 13px;
    line-height: 13px;
    cursor: pointer
}
</style>
<div id="container">
    <div id="header">
        <div id="headerContent"></div>
    </div>
    <div id="content">
        <div id="inner-content">
            <div id="id0" class="box">
                <div class="boxHeader">
                    <div class="boxHeaderContent">1 <span><a class="boxCloseButton">x</a></span>

                    </div>
                </div>
            </div>
            <div id="id1" class="box">
                <div class="boxHeader">
                    <div class="boxHeaderContent">2 <span><a class="boxCloseButton">x</a></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
<script>
$(function() {
    $(".box").each(function () {
        $(this).draggable({
            containment: "#inner-content",
            scroll: true
        });
    });

    $(document).on("click", "a.boxCloseButton", function () {
        // Close button is clicked
        // get the parent div box
        var box = $(this).parents('div.box');
        // remove box from DOM. 
        // BUG: Removing a node from the DOM causes all its younger siblings to be re-positioned.
        // The re-positioning is random and causes un-expected behaviour.
        box.remove();
    });
}
</script>
4

2 に答える 2

0

DOM から最初の DIV を削除すると、その下にある 2 番目の DIV が何らかの理由でページを上っているように見えます。

それが float の定義ではないでしょうか。

于 2013-04-20T23:03:14.570 に答える