3

画面サイズを小さくしたときに子がアタッチされる親divを変更しようとしています。
これが私のコードです：

HTML：

<div id="menu">Menu 1</div>
<div id="testing">Testing 1</div>
<div id="boxed">
    <div id="box-01" class="boxes"></div>
    <div id="box-02" class="boxes"></div>
    <div id="box-03" class="boxes"></div>
    <div id="box-04" class="boxes">
        <div id="menu-right">Menu 2</div>
    </div>
    <div id="box-05" class="boxes"></div>
    <div id="box-06" class="boxes"></div>
    <div id="box-07" class="boxes"></div>
    <div id="box-08" class="boxes"></div>
</div>

CSS：

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    left: 20px;
    top: 10px;
    position: absolute;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 100px;
    position: absolute;
    top: -50px;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    left: 20px;
    top: 30px;
    position: absolute;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
    position:relative;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}

http://jsfiddle.net/L2Deq/20/したがって

、ボックス4が右上隅にある場合、「menu-right」は現在「box-04」の子ですが、画面サイズを小さくすると、メニューもドロップダウンします。画面サイズを小さくしたときに、子がどちらの親にアタッチされるかを変更できるかどうかを調べようとしているので、ボックス4がドロップダウンすると、ボックス3にアタッチされます。そのため、メニューは常に右上のボックスに添付されたままになります。
あるいは、これを達成するためのより簡単な方法があるかもしれませんが、それを理解できないようです。
うまくいけば、それは理にかなっています、私はまだ初心者です。</ p>

4

1 に答える 1

0

サイズ変更時に#boxedの幅を取得し、行に収まる.boxの数（#boxed width / .boxes width）を計算して、そのボックスに＃menu-rightを添付します。

たとえば、次のように使用します。

.resize()

resize（）

appendTo()

appendTo（）

于 2012-11-23T11:10:50.220 に答える