如何将一个div右对齐到另一个div下方？

Question

我在Jquery中创建了一个下拉菜单，它运行得非常完美，但是我只有一个关于菜单定位的问题。当时我刚学习jquery动画，还是个初学者，所以没有按照任何教程操作。

所以我想知道如何将菜单放置在按钮正下方？

<div id="nav" class="grid_5">
    <a href=""> ABOUT </a>
    <a id="products" href=""> PRODUCTS </a>
    <a href=""> HOME </a>
</div>
<div id="menu">
    <a class="menuButton" href=""> Cakes </a><br>
    <a class="menuButton" href=""> Cupcakes </a><br>
    <a class="menuButton" href=""> Fudges </a><br>
    <a class="menuButton" href=""> Ice Creams </a><br>
    <a class="menuButton" href=""> Hard Candies </a>
</div>

菜单是使用绝对定位设置在按钮下方。

以下是全屏时网站的外观： 以下是窗口化时网站的外观： 我想学习如何使用 JQuery/JScript 或 CSS 实现这一功能。

- Andrew V

---

提供当前创建该位置的CSS将有所帮助。 - PlantTheIdea

非常抱歉我忘了，但是问题已经得到回答了。 - Andrew V

Answer 1

你遇到这个问题是因为菜单是相对于 body 定位的，因此当窗口宽度改变时，菜单的位置也会改变。为了解决这个问题，你需要将链接和菜单放在一个具有 position: relative 属性的元素中。

这样就意味着你可以将菜单绝对定位相对于它所在的容器。例如：

<div style="position: relative">
    <div id="nav" class="grid_5">
        <a href=""> ABOUT </a>
        <a id="products" href=""> PRODUCTS </a>
        <a href=""> HOME </a>
    </div>
    <!-- When you position this absolutely it will now be relative to the container -->
    <div id="menu">
        <a class="menuButton" href=""> Cakes </a><br>
        <a class="menuButton" href=""> Cupcakes </a><br>
        <a class="menuButton" href=""> Fudges </a><br>
        <a class="menuButton" href=""> Ice Creams </a><br>
        <a class="menuButton" href=""> Hard Candies </a>
    </div>

显然最好不要使用内联样式，而是将类应用于容器。

- Pattle

---

我将该位置应用于container_12 div。 - Andrew V

Answer 2

将nav和menu的div包装在一个新的div中，并使用position:relative属性，这样你的menu div就可以根据其父级元素定位。

<div class="relative">
<div id="nav" class="grid_5">
    <a href=""> ABOUT </a>
    <a id="products" href=""> PRODUCTS </a>
    <a href=""> HOME </a>
</div>
<div id="menu">
    <a class="menuButton" href=""> Cakes </a><br>
    <a class="menuButton" href=""> Cupcakes </a><br>
    <a class="menuButton" href=""> Fudges </a><br>
    <a class="menuButton" href=""> Ice Creams </a><br>
    <a class="menuButton" href=""> Hard Candies </a>
</div>
</div>

样式表：

.relative{
   position: relative;
}

- Bhojendra Rauniyar