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;
}

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

所以“menu-right”目前是“box-04”的孩子，当框 4 位于右上角时，但是当屏幕尺寸减小时，菜单也会下拉。我试图弄清楚当屏幕尺寸减小时是否可以更改孩子连接到哪个父级，因此当框 4 下降时，它将连接到框 3，依此类推。所以菜单总是附在右上角的框上。
或者也许有一种更简单的方法可以实现这一点，似乎无法弄清楚。
希望这是有道理的，我仍然是初学者。​</p>

4

1 回答 1

0

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

使用例如：

.resize()

调整大小（）

appendTo()

追加到（）

于 2012-11-23T11:10:50.220 回答