我正在尝试将子 div 标签与父 div 标签的底部或基线对齐。
我想要做的就是让子 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，并且我需要它们都与基线/底部对齐。
absolute 定位。
你需要添加这个：
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}
声明 absolute 元素时，它根据其最近的不是 static 的父元素定位（它必须是 absolute、relative 或 fixed）。
七年后搜索垂直对齐仍然会提出这个问题，所以我将发布另一个我们现在可以使用的解决方案：flexbox 定位。只需在父 div 上设置 display:flex; justify-content: flex-end; flex-direction: column（在此 fiddle 中也有演示）：
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
align-items: flex-start;。
使用 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;
}
我在这里创建了一个 JSBin 演示：http://jsbin.com/INOnAkuF/2/edit
该演示还有一个示例，如何使用相同的技术进行垂直居中对齐。
这有效（我只测试了 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>
希望有帮助。
Y. Shoham 发布的答案（使用绝对定位）在大多数情况下容器是固定高度的情况下似乎是最简单的解决方案，但是如果父 DIV 必须包含多个 DIV 并根据动态内容自动调整其高度，那么可能有问题。我需要有两个动态内容块；一个与容器的顶部对齐，一个与底部对齐，虽然我可以让容器调整到顶部 DIV 的大小，但如果与底部对齐的 DIV 更高，它不会调整容器的大小，但会延伸到外面. romiem 上面概述的使用表格样式定位的方法虽然有点复杂，但在这方面更加稳健，并且允许与底部对齐并纠正容器的自动高度。
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>
https://i.stack.imgur.com/ypMfh.jpg
我意识到这不是一个新的答案，但我想对这种方法发表评论，因为它引导我找到我的解决方案，但作为一个新手，我不允许发表评论，只能发帖。
您可能必须将子 div 设置为具有 position: absolute。
将您的孩子样式更新为
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}
一个旧帖子，但我想我会为任何寻找的人分享一个答案。而且因为当您使用 absolute 时，事情可能会出错。我会做的是
HTML
<div id="parentDiv"></div>
<div class="childDiv"></div>
Css
parentDiv{
}
childDiv{
height:40px;
margin-top:-20px;
}
这只会让底部 div 回到父 div 中。对于大多数浏览器也是安全的
我有类似的东西，并通过有效地为孩子添加一些 padding-top 来让它工作。
我确信这里的其他一些答案会得到解决方案，但是经过很长时间后我无法让它们轻松工作；相反，我最终得到了 padding-top 解决方案，它简洁优雅，但对我来说似乎有点 hackish（更不用说它设置的像素值可能取决于父级高度）。
您还可以使用垂直对齐
td { 高度：150px;宽度：150px；文本对齐：居中； } b { 边框：1px 纯黑色； } .child-2 { 垂直对齐：底部； } .child-3 { 垂直对齐：顶部； }
| child 1 | child 2 | child 3 |
<body>
<!-- CSS styles-->
<style>
.parent{
background-color:gray;
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
</style>
<!-- HTML -->
<div class="parent">
<div class="child1">
hello world! this is first child aligned at the top of parent div
</div>
<div class="child2">
hello world! this is first child aligned in the space between first and last child
</div>
<div class="child3">
hello world! this is last child aligned at the bottom of parent div
</div>
</div>
</body>
如果您的父 Div 中有多个子 Div，则可以使用如下所示的垂直对齐属性：
.Parent div
{
vertical-align : bottom;
}
关注公众号
不定期副业成功案例分享
