Как я могу выровнять div прямо под другим?

Я создал раскрывающееся меню в JQuery, и он работает отлично, но у меня есть только одна проблема с позиционированием меню. Я создал меню сразу после того, как узнал о jQuery анимации, и я все еще новичок, поэтому я не следил за учебниками.Как я могу выровнять div прямо под другим?

Так что мне было интересно, как я могу разместить меню прямо под кнопкой?

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

Меню установлено под кнопкой, используя абсолютное положение.

Вот как выглядит сайт в то время как весь экран: Image on my computer full screen

Вот как выглядит сайт в то время как в оконном: Image on my computer windowed

Я хотел бы узнать, как сделать это с помощью JQuery/JScript или CSS ,

источник

2014-11-06 Andrew V

, обеспечивающий CSS, который в настоящее время создает это размещение. – PlantTheIdea

Прошу прощения за то, что я забыл. Но вопрос был дан в любом случае. –

У тебя эту проблему, потому что меню находится в положении относительно 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>

Очевидно, что лучше не использовать встроенные стили и вместо того, чтобы применить класс к контейнеру

источник

2014-11-06 16:20:49 Pattle

спасибо :) Я применил позицию к контейнеру_12 div –

Wrap нав и меню DIV в DIV и применить положения относительно, с помощью которого ваша позиция меню 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>

CSS:

.relative{ 
    position: relative; 
}

источник

2014-11-06 16:07:17

Как я могу выровнять div прямо под другим?

ответ

Смежные вопросы