将DIValignment到底部或基线

我试图将一个子div标签alignment到父div标签的底部或基线。

我想要做的就是在Parent Div的基线上有孩子Div,现在看起来像这样:

HTML

<div id="parentDiv"> <div class="childDiv"></div> </div> 

CSS

 #parentDiv { width:300px; height:300px; background-color:#ccc; background-repeat:repeat } #parentDiv .childDiv { height:100px; width:30px; background-color:#999; } 

注意

我将有多个不同高度的childDiv ,我将需要他们全部alignment基线/底部。

9 Solutions collect form web for “将DIValignment到底部或基线”

你需要添加这个:

 #parentDiv { position: relative; } #parentDiv .childDiv { position: absolute; bottom: 0; left: 0; } 

在声明absolute元素的时候,它是根据最近的不是static父元素来定位的(它必须是absoluterelative或者是fixed )。

使用table和table-cell的CSS显示值:

HTML

 <html> <body> <div class="valign bottom"> <div> <div>my bottom aligned div 1</div> <div>my bottom aligned div 2</div> <div>my bottom aligned div 3</div> </div> </div> </body> </html> 

CSS

 html,body { width: 100%; height: 100%; } .valign { display: table; width: 100%; height: 100%; } .valign > div { display: table-cell; width: 100%; height: 100%; } .valign.bottom > div { vertical-align: bottom; } 

我在这里创build了一个JSBin演示: http : //jsbin.com/INOnAkuF/2/edit

演示还有一个例子,如何使用相同的技术垂直居中alignment。

这工作(我只testing即&ff):

 <html> <head> <style type="text/css"> #parent { height: 300px; width: 300px; background-color: #ccc; border: 1px solid red; position: relative; } #child { height: 100px; width: 30px; background-color: #eee; border: 1px solid green; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <div id="parent">parent <div id="child">child</div> </div> outside </body> </html> 

希望有所帮助。

七年后的search垂直alignment仍然提出了这个问题,所以我会张贴另一个解决scheme,我们现在可用:flexbox定位。 只需设置display:flex; justify-content: flex-end; flex-direction: column display:flex; justify-content: flex-end; flex-direction: column display:flex; justify-content: flex-end; flex-direction: column父div上的display:flex; justify-content: flex-end; flex-direction: column (在这个小提琴演示中):

 #parentDiv { display: flex; justify-content: flex-end; flex-direction: column; width:300px; height:300px; background-color:#ccc; background-repeat:repeat } 

Y. Shoham(使用绝对定位)发布的答案似乎是在大多数情况下容器是固定高度的最简单的解决scheme,但是如果父DIV必须包含多个DIV并根据dynamic内容自动调整其高度,可能会有问题。 我需要有两个dynamic内容块; 一个与容器的顶部alignment,一个与底部alignment,尽pipe我可以让容器调整到顶部DIV的大小,但是如果与底部alignment的DIV较高,则不会调整容器的大小,但会延伸到外部。 上面罗列了使用表格式定位的方法,虽然稍微复杂一些,但是在这方面更稳固,并且允许alignment到底部并校正容器的自动高度。

CSS

 #container { display: table; height: auto; } #top { display: table-cell; width:50%; height: 100%; } #bottom { display: table-cell; width:50%; vertical-align: bottom; height: 100%; } 

HTML

 <div id=“container”> <div id=“top”>Dynamic content aligned to top of #container</div> <div id=“bottom”>Dynamic content aligned to botttom of #container</div> </div> 

例

我意识到这不是一个新的答案,但我想评论这种方法,因为它导致我find我的解决scheme,但作为一个新手,我不能发表评论,只有后。

一个旧post,但认为我会分享给任何人看的答案。 而且因为当你用absolute东西可能会出错。 我会做的是

HTML

 <div id="parentDiv"></div> <div class="childDiv"></div> 

Css

 parentDiv{ } childDiv{ height:40px; margin-top:-20px; } 

而这只是坐在底部的股利备份到父div。 对于大多数浏览器也是安全的

你可能将不得不设置子div的position: absolute

更新你的孩子的风格

 #parentDiv .childDiv { height:100px; width:30px; background-color:#999; position:absolute; top:207px; } 

我有类似的东西,并有效地为孩子添加一些填充顶部

我相信这里的其他一些答案会得到解决办法,但是我花了很多时间让他们不能轻松地工作。 我最终select了简洁优雅的padding-top解决scheme,但对我来说似乎有些ha((更不用说它设置的像素值可能取决于父级高度)。

如果你的父级Div中有多个子Div,那么你可以使用垂直alignment的属性如下:

 .Parent div { vertical-align : bottom; } 
  • TD宽度,不工作?
  • XHTML和HTML有什么区别?
  • 如何保存Chrome开发人员工具的样式面板的CSS更改?
  • 我怎样才能得到第二个孩子使用CSS?
  • 将optgroups嵌套在dropdownlist / select中
  • 如何在CSS中锚定元素?
  • 单选button“选中”属性不工作
  • 如何让手风琴在closures所有菜单的情况下加载?
  • 拉伸水平ul以适应div的宽度
  • 用于Web开发的九个补丁图像
  • 如何防止电话号码转换成Skype链接?