当屏幕尺寸减小时改变div的父元素

Question

当屏幕尺寸缩小时，我想要更改子元素所附加的父级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;
}

我还有一个jsFiddle演示：http://jsfiddle.net/L2Deq/20/。

当前，'menu-right'是'box-04'的子代，当box 4位于右上角时，但当屏幕大小减小时，菜单也会下降。我正在尝试弄清楚是否可能在屏幕大小减小时更改子代附加的父代，以便当box 4下降时，它将附加到box 3等等。因此，菜单始终保持附加到右上角的框中。

或者也许有更简单的方法来实现这一点，无法想出来。

希望这样说得清楚，我还是个初学者。

- user1374796

---

为什么不使用百分比而不是像素(px)来设置宽度和高度？ - GaurabDahal

@vinique 因为我想让菜单在每次窗口大小减小100像素（红框的宽度）时移动，以使红框向下移一行，即始终与屏幕最右侧的红框保持对齐。 - user1374796

Answer 1

在调整大小时获取#boxed的宽度，计算一行可以容纳多少个.boxes（#boxed宽度/.boxes宽度），并将#menu-right附加到该框上。

例如使用：

.resize()

resize()

的意思是调整链接1的大小。

appendTo()

appendTo()

-->

{{链接1：appendTo()}}

- FreeJ