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

Question

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

但是对于我使用的基本布局 bootstrap 3样式元素，但它们已经定制，所以我认为这是比解决特定框架/lib 更一般的 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带有一些您可以看到的额外样式的类。

最后一个 div 是灰线 - <div class="container" style="background-color: grey; height: 50px;">我再次使用预定义的 .container几乎没有变化的类。

图像中的红色边框框代表我现在要添加的内容。我需要一个垂直菜单，但设计要求垂直菜单位于深黄色 div 的正下方。如您所见Home菜单链接为蓝色。左侧也是 div 的左端，所以我需要的是不要介意如何调整窗口大小以使垂直菜单始终位于黄色 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%;
}