Question

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

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

#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＆＃39;与最外面的红色框一致。因此，当屏幕尺寸减小时，菜单以100px（红色框的宽度）移动，因此它始终与右侧的框一致。希望这是有道理的，我似乎无法弄清楚如何实现这一点，不确定我是否可以用css实现，或者它可能需要jQuery？

Answer 1

您可以将第二个菜单设置为方框4的子项。将方框设置为相对位置，然后将菜单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/

Answer 2

我在外面包裹了一个容器，设置了最大宽度，将你的布局改为相对而不是绝对，并使用了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;
}

Answer 3

要按照与框的包装间隔匹配的间隔对齐菜单，您需要使用媒体查询或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 with it in action.

菜单锚定到最外层的div

3 个答案: