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

时间:2013-11-15 22:44:20

标签: jquery html css twitter-bootstrap-3

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

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

Part of the basic layout

不同的颜色只是为了让它更容易理解,因为我没有太多的经验,所以我会更容易解释我想要完成的事情。我有一个<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的正下方,与左下方对齐。为了更清楚,我将发布一个应该是什么样子的图像:

Left aligned div

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

1 个答案:

答案 0 :(得分:0)

如果我理解正确,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%;
}