Html 将 DIV 与底部或基线对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2015032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align DIV's to bottom or baseline
提问by sia
I'm trying to align a child div tag to the bottom or baseline of the parent div tag.
我正在尝试将子 div 标签与父 div 标签的底部或基线对齐。
All I want to do is have the child Div at the baseline of the Parent Div, here is what it looks like now:
我想要做的就是将子 Div 放在父 Div 的基线处，这是现在的样子：
HTML
HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>
CSS
CSS
#parentDiv
{
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
}
Note
笔记
I will have multiple childDivs with varying heights, and I'll need them all to align to the baseline/bottom.
我将有多个childDiv具有不同高度的 s，我需要它们都与基线/底部对齐。
回答by Y. Shoham
You need to add this:
你需要添加这个：
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}
When declaring absoluteelement, it is positioned according to its nearest parent that is not static(it must be absolute, relativeor fixed).
声明absolute元素时，它根据其最近的不是static（它必须是absolute,relative或fixed）的父元素来定位。
回答by gcbenison
Seven years later searches for vertical alignment still bring up this question, so I'll post another solution we have available to us now: flexbox positioning. Just set display:flex; justify-content: flex-end; flex-direction: columnon the parent div (demonstrated in this fiddleas well):
七年后搜索垂直对齐仍然会提出这个问题，所以我将发布另一个我们现在可用的解决方案：flexbox 定位。只需display:flex; justify-content: flex-end; flex-direction: column在父 div 上设置（也在此小提琴中演示）：
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
回答by romiem
Use the CSS display values of table and table-cell:
使用 table 和 table-cell 的 CSS 显示值：
HTML
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
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;
}
I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit
我在这里创建了一个 JSBin 演示：http: //jsbin.com/INOnAkuF/2/edit
The demo also has an example how to vertically center align using the same technique.
该演示还有一个示例，说明如何使用相同的技术垂直居中对齐。
回答by pstanton
this works (i only tested ie & ff):
这有效（我只测试了 ie & 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>
hope that helps.
希望有帮助。
回答by Nick Gillard
The answer posted by Y. Shoham (using absolute positioning) seems to be the simplest solution in most cases where the container is a fixed height, but if the parent DIV has to contain multiple DIVs and auto adjust it's height based on dynamic content, then there can be a problem. I needed to have two blocks of dynamic content; one aligned to the top of the container and one to the bottom and although I could get the container to adjust to the size of the top DIV, if the DIV aligned to the bottom was taller, it would not resize the container but would extend outside. The method outlined above by romiem using table style positioning, although a bit more complicated, is more robust in this respect and allowed alignment to the bottom and correct auto height of the container.
Y. Shoham 发布的答案（使用绝对定位）在大多数容器是固定高度的情况下似乎是最简单的解决方案，但是如果父 DIV 必须包含多个 DIV 并根据动态内容自动调整它的高度，那么可能有问题。我需要有两个动态内容块；一个与容器顶部对齐，一个与底部对齐，虽然我可以让容器调整到顶部 DIV 的大小，但如果与底部对齐的 DIV 更高，它不会调整容器的大小，但会延伸到外面. romiem 上面概述的方法使用表格样式定位，虽然有点复杂，但在这方面更健壮，并且允许对齐到底部和正确的容器自动高度。
CSS
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
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>
I realise this is not a new answer but I wanted to comment on this approach as it lead me to find my solution but as a newbie I was not allowed to comment, only post.
我意识到这不是一个新答案，但我想对这种方法发表评论，因为它引导我找到我的解决方案，但作为一个新手，我不允许发表评论，只能发帖。
回答by Ravia
You would probably would have to set the child div to have position: absolute.
您可能必须将子 div 设置为具有position: absolute.
Update your child style to
将您的孩子风格更新为
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}
回答by Ravia
An old post but thought i would share an answer for anyone looking.
And because when you use absolutethings can go wrong.
What I would do is
一个旧帖子，但我想我会为任何寻找的人分享答案。因为当你使用时，absolute事情可能会出错。我会做的是
HTML
HTML
<div id="parentDiv"></div>
<div class="childDiv"></div>
The Css
Css
parentDiv{
}
childDiv{
height:40px;
margin-top:-20px;
}
And that would just sit that bottom div back up into the parent div. safe for most browsers too
这只会让底部 div 回到父 div 中。对于大多数浏览器也是安全的
回答by cellepo
I had something similar and got it to work by effectively adding some padding-topto the child.
我有类似的东西，并通过有效地向孩子添加一些填充顶部来使其工作。
I'm sure some of the other answers here would get to the solution, but I couldn't get them to easily work after a lot of time; I instead ended up with the padding-top solution which is elegant in its simplicity, but seems kind of hackish to me (not to mention the pixel value it sets would probably depend on the parent height).
我确信这里的其他一些答案会得到解决方案，但很长时间后我无法让它们轻松工作；相反，我最终使用了 padding-top 解决方案，它的简单性很优雅，但对我来说似乎有点黑（更不用说它设置的像素值可能取决于父级高度）。
回答by NEM
td {
height: 150px;
width: 150px;
text-align: center;
}
b {
border: 1px solid black;
}
.child-2 {
vertical-align: bottom;
}
.child-3 {
vertical-align: top;
}<table border=1>
<tr>
<td class="child-1">
<b>child 1</b>
</td>
<td class="child-2">
<b>child 2</b>
</td>
<td class="child-3">
<b>child 3</b>
</td>
</tr>
</table>This is my solution
这是我的解决方案
回答by Pawan
If you are having multiple child Div's inside your parent Div, then you can use vertical-align property something like below :
如果您的父 Div 中有多个子 Div，则可以使用如下所示的 vertical-align 属性：
.Parent div
{
vertical-align : bottom;
}
