如何将div元素定位在右下方并左对齐到另一个div

Question

我的设置是这样的 - 我正在处理 ASP.NET MVC 4。对于用户界面，特别是针对这个问题，我正在为_Layout 做这件事，所以这是一个非常基本的设置，将为所有页面共享。我在可以使用bootstrap 3 的地方使用，但该站点仅针对大型显示设备，因此很多事情将通过其他工具完成。

但是对于基本布局，我使用bootstrap 3 样式元素，但它们已经定制，所以我认为这是更一般的 CSS/JS 相关问题，而不是解决特定框架/lib。把它放在这里，这样我就可以为我的问题找到最好的解决方案：

不同的颜色只是为了更容易理解，因为我没有太多经验，所以我更容易解释我想要完成的事情。我有一个<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 class .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 类和一些您可以看到的额外样式。

最后一个 div 是灰线 - <div class="container" style="background-color: grey; height: 50px;">，我再次使用预定义的 .container 类，只做了少许更改。

图片中的红框代表我现在要添加的内容。我需要一个垂直菜单，但设计要求垂直菜单位于深黄色 div 的正下方。如您所见，Home 菜单链接是蓝色的。左侧也是 div 的左端，所以我需要的是不要介意如何调整窗口大小以使垂直菜单始终位于黄色 div 的正下方，与它的左下角对齐。为了更清楚，我会发布一张它应该是什么样子的图片：

所以我想要但我不知道该怎么做的第一件事就是定位 div，使其位于菜单 div 下方并与它左对齐。第二个是我需要在灰色 div 上显示菜单，就像上图所示。只是为了使它完整-想法是垂直菜单始终具有Home菜单链接的宽度。但是我想我得到了一点jQuery，所以我的问题完全是关于如何以我想要的方式定位 div？

Answer 1

如果我理解正确，970px 容器从浅蓝色主页链接的左边框开始，并继续向右“离屏”。如果我错了，请纠正我。

在这种情况下，我会设置一个 970 像素宽的容器，并使用自动边距使其居中，然后将其他容器放入其中。如果红框在 970px 宽的容器内，既然你知道灰框的高度，你也可以只为红框设置样式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%;
}