如何将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类.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容器从淡蓝色Home链接的左边框开始，并向右“继续”屏幕外。如果我错了，请纠正我。

在这种情况下，我会设置一个970px宽的单个容器，带有自动边距使其居中，然后将其他容器放在里面。如果红色框位于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%;
}