0

我想知道是否可以将菜单锚定在布局上最外层的 div 上方？
这是我设置的 jsFiddle：http: //jsfiddle.net/L2Deq/7/
这里也是代码：
HTML—</p> 

<div id="menu">Menu 1</div>
<div id="testing">Testing 1</div>

<div id="menu-right">Menu 2</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>
<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——</p> 

#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;
    left: 128px;
    top: 10px;
    position: absolute;
}

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

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



基本上，我希望将“菜单 2”与最外面的红色框对齐。因此，当屏幕尺寸减小时，菜单会移动 100 像素（红色框的宽度），因此它始终与右侧的框对齐。希望这是有道理的，我似乎无法弄清楚如何实现这一点，不确定我是否可以用 css 实现，或者它可能需要 jQuery？

4

3 回答 3

0

您可以将第二个菜单设置为框 4 的子菜单。将框设置为 position:relative，然后将菜单 2 绝对定位在框 4 上方，方法是给它一个负顶部。

看你的小提琴版本 20

编辑：

使用容器 div 对 STLRick 的解决方案进行快速而肮脏的修改将产生我认为您可以使用的结果。

基本上通过将整个程序集包装在一个容器中，然后将 menu2 设置为相对容器的绝对位置，您可以将 menu2 绝对定位在所述容器的右上角。只要您的布局在菜单的位置和方块的位置方面没有改变，它就应该始终位于右上角。

#container {
    max-width: 900px;
    position relative;
}

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

http://jsfiddle.net/L2Deq/41/

这真的很接近，但是窗口宽度中有一些点导致框是错误的，它们是非常小的点（2 - 5 像素）

http://jsfiddle.net/L2Deq/60/

甚至更近一点：

http://jsfiddle.net/gL22f/5/

于 2012-11-20T21:34:00.093 回答
0

我在外面包裹了一个容器，设置了最大宽度，将布局更改为相对而不是绝对，并使用 css Float 属性来正确定位所有内容。我很确定这不是您想要的（菜单不会移动 100px 块，而是流畅地移动），但这里是小提琴和 CSS 更改：

http://jsfiddle.net/L2Deq/21/

#container {
    max-width: 900px;
}

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

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 10px;
    margin-top: -60px;
    position: relative;
    float: right;
    margin-right: 25px;
}

.clear {
    clear: both;
}

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

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

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}
于 2012-11-20T21:34:45.140 回答
0

要在与框的包装间隔相匹配的间隔中对齐菜单，您需要使用媒体查询或 javascript。我建议使用 jQuery，因为它可以为您提供最大的灵活性来更改框大小，而无需重写所有媒体查询断点。

这是一个片段，我认为它可以呈现您想要的结果。

$(document).ready(function() {
    // Position the menu on document ready.
    positionMenu();

    // Bind it to run when the window resizes
    $(window).resize(function(){
        positionMenu();
    });
});

function positionMenu() {
    // Get the top-offset of the first box.
    var toprowoffset = $('.boxes:first').offset().top;

    // All the boxes with the same top-offset is in the top row - add class top to them.
    $('.boxes').each(function(){
        $(this).toggleClass('top',$(this).offset().top == toprowoffset);
    });

    // The last box in the top row is the one we want to align to.
    var alignbox = $('.boxes.top:last');

    // Calculate and set the right margin for the menu using the alignbox position.
    var marginright = $(document).width() - alignbox.position().left - alignbox.width();
    $('#menu-right').css('margin-right',marginright);
}​

这是一个jsfiddle-link，它正在运行。

于 2012-11-20T23:22:41.413 回答