将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基线/底部。
你需要添加这个：
#parentDiv { position: relative; } #parentDiv .childDiv { position: absolute; bottom: 0; left: 0; }
在声明absolute元素的时候，它是根据最近的不是static父元素来定位的（它必须是absolute ， relative或者是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; }
