Как расположить элемент div прямо под другим элементом div и выровнять его по левому краю

Question

Моя установка такова: я работаю над ASP.NET MVC 4.Что касается пользовательского интерфейса и конкретно этого вопроса, я делаю это для _Layout так что это очень простая настройка, которая будет общей для всех страниц.Я использую, где могу bootstrap 3 но сайт предназначен только для больших устройств отображения, поэтому многое можно будет сделать с помощью других инструментов.

Однако для базового макета я использую bootstrap 3 стилизованные элементы, но они уже настроены, поэтому я думаю, что это более общий вопрос, связанный с CSS/JS, чем рассмотрение конкретной структуры/библиотеки.Просто поместите это здесь, чтобы я мог получить лучшее решение моей проблемы, а именно:

Различные цвета предназначены просто для облегчения понимания, а поскольку у меня мало опыта, мне будет легче объяснить, чего я хочу достичь.у меня есть <div id="top-nav-wrapper"> цель которого состоит только в том, чтобы удерживать остальные 3 элемента div и предоставлять фоновое изображение, поскольку макет центрируется и фиксируется 970px поэтому на больших разрешениях эта полоса идет с обоих концов.Стиль этого div-обертки довольно прост:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
}

Внутри #top-nav-wrapper div У меня есть еще три тега div.Первый — с темно-синим фоном. <div class="container">.Здесь я использую bootstrap 3 сорт .container но он настроен, и его стиль:

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

После этого div следует другой с кнопками навигации и темно-желтым фоном —

<div class="container" style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important;">

снова используя .container class с некоторыми дополнительными стилями, которые вы можете увидеть.

Последний div — серая линия — <div class="container" style="background-color: grey; height: 50px;"> и снова я использую предопределенный .container класс с небольшими изменениями.

Поле с красной рамкой на изображении представляет то, что я хочу добавить сейчас.Мне нужно вертикальное меню, но дизайн требует, чтобы вертикальное меню располагалось прямо под темно-желтым элементом div.Как вы можете видеть Home Ссылка меню окрашена в синий цвет.Левая сторона также является левым концом элемента div, поэтому мне не важно, как изменяется размер окна, чтобы вертикальное меню всегда было прямо под желтым элементом div, выровненное по левому нижнему краю.Чтобы было понятнее, выложу фото того, как это должно выглядеть:

поэтому первое, что я хочу и не знаю, как сделать, это расположить div так, чтобы он находился под элементом меню и был выровнен по левому краю.Во-вторых, мне нужно, чтобы меню отображалось поверх серого элемента div, как показано на изображении выше.Для полноты: идея состоит в том, чтобы вертикальное меню всегда имело ширину Home ссылка на меню.Но думаю, я получил это с небольшим jQuery Итак, мой вопрос полностью о том, как расположить div так, как я хочу?

Answer 1

Если я правильно понимаю, контейнеры размером 970 пикселей начинаются с левой границы голубой ссылки «Домой» и продолжаются «за кадром» вправо.Пожалуйста, поправьте меня, если я ошибаюсь.

В этом случае я бы установил один контейнер шириной 970 пикселей с автоматическими полями для его центрирования, а затем поместил бы внутрь другие контейнеры.Если красный прямоугольник находится внутри контейнера шириной 970 пикселей, то, поскольку вы знаете высоту серого прямоугольника, вы также можете просто стилизовать красный прямоугольник. margin-top: -50px

Вот некоторый код, и вы можете увидеть его в этом JSFiddle.

HTML:

<div id="top-nav-wrapper">
    <div class="container">
        <div style="height: 50px; background: #006"></div>
        <div style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important; background: #eb0;"></div>
        <div style="background-color: grey; height: 50px;"></div>
    </div>
</div>
<div id="main-wrapper">
    <div class="container">
        <div style="background: red; width: 200px; height: 400px; margin-top: -50px"></div>
    </div>
</div>

CSS:

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
    width: 100%;
}

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container div {
    width: 100%;
}