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

我的设置是这样的-我正在使用

ASP.NET MVC 4

。对于用户界面，特别是对于这个问题，我是针对

\u布局

进行设置的，因此这是非常基本的设置，所有页面都将共享。我正在使用where-I-can

bootstrap3

，但该网站只针对大型显示设备，因此很多事情都将通过其他工具完成

然而，对于基本布局，我使用的是

bootstrap3

样式化元素，但是它们已经被定制了，所以我认为这是一个更一般的CSS/JS相关问题，而不是解决特定的框架/lib。只要把它放在这里，我就可以为我的问题找到最好的解决方案，这就是：

不同的颜色只是为了让它更容易理解，因为我没有太多的经验，所以我会更容易解释我想要完成什么。我有一个

，它的目的仅仅是容纳其他3个div并提供背景图像，因为布局居中并固定在

970px

上，所以在更大的分辨率下，我在两端都有这个条纹。此包装器div的样式非常简单：

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

在

#顶部导航包装

div中，我还有三个其他div标签。第一个是深蓝色背景的-

。这里我使用的是

bootstrap3

class

.container

，但它是定制的，并且它的风格是：

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

在这个div之后，另一个div后面是导航按钮和深黄色背景-

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

再次使用

.container

类和一些您可以看到的附加样式

最后一个div是灰线-

，我再次使用预定义的

.container

类，几乎没有更改

图中红色边框框表示我现在要添加的内容。我需要一个垂直菜单，但设计要求垂直菜单正好位于深黄色的div下方。正如您所看到的，

Home

菜单链接是蓝色的。左侧也是div的左端，因此我需要的是不知道如何调整窗口的大小，使垂直菜单始终位于黄色div的正下方，与它的左下角对齐。为了让它更清晰，我将发布一张它应该是什么样子的图片：

---

所以我想做的第一件事，我不知道怎么做，就是定位div，使其位于菜单div下，并与之左对齐。第二个是，我需要菜单显示在灰色的div上，就像上面的图片一样。为了使其完整，我们的想法是使垂直菜单始终具有

主页

菜单链接的宽度。但是，我想我是通过一个小小的

jQuery

实现了这一点，所以我的问题完全是关于如何按照我想要的方式定位div？

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

在这种情况下，我将设置一个970px宽的容器，并使用自动边距将其居中，然后将其他容器放入其中。如果红色框位于970px宽的容器内，因为您知道灰色框的高度，您也可以只设置红色框的样式

边距顶部：-50px

这里有一些代码，你可以在这里看到

HTML:

---

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

在这种情况下，我将设置一个970px宽的容器，并使用自动边距将其居中，然后将其他容器放入其中。如果红色框位于970px宽的容器内，因为您知道灰色框的高度，您也可以只设置红色框的样式

边距顶部：-50px

这里有一些代码，你可以在这里看到

HTML:

---

我不确定你是否会读到这篇文章，因为这是周末，但你的代码的问题是，实际上

#top nav wrapper

不再是wrapper，因为它在另一个div中。正如你可能看到的

background repeat:repeat-x

是因为我希望此图像的宽度为100%，无论分辨率如何，包装器内的所有其他div都居中且固定宽度为

970px

，但一旦我走到

970px

上方，我希望我的

背景图像

条带填充顶部的空白。换言之，转到小提琴的例子，开始拉伸窗口…在某个点上，两边都会有完全的空白（毕竟所有东西都固定为970px），但我需要的是背景图像来填充这个空间。是的，这是真的。我已经更新了我的答案。通过确保红色框位于

.container

内，您仍然可以执行相同的操作。我只给固定宽度的div加了背景色，因为我没有navbar-stripe.png作为导航背景。我不确定你是否会读到这篇文章，因为现在是周末，但你的代码的问题是，实际上

#顶部导航包装器

不再是包装器，因为它在另一个div内。你可能会看到

背景重复：重复-x

是因为我希望此图像的宽度为100%，无论分辨率如何，包装器内的所有其他div都居中且固定宽度为

970px

，但一旦我走到

970px

上方，我希望我的

背景图像

条带填充顶部的空白。换言之，转到小提琴的例子，开始拉伸窗口…在某个点上，两边都会有完全的空白（毕竟所有东西都固定为970px），但我需要的是背景图像来填充这个空间。是的，这是真的。我已经更新了我的答案。通过确保红色框位于

.container

内，您仍然可以执行相同的操作。我只为固定宽度的div指定了背景色，因为我没有nav背景的navbar-stripe.png。

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

#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%;
}