将 DIV 与底部或基线对齐

小开

您可能必须将子 div 设置为 position: absolute。

将您的子样式更新为

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

小开

你需要加上这个:

#parentDiv {
position: relative;
}


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

在声明 absolute元素时，它是根据其最近的父元素(不是 static)定位的(它必须是 absolute、 relative或 fixed)。

小开

this works (i only tested 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>

希望能帮上忙。

小开

如果在父 Div 中有多个子 Div，那么可以使用如下的垂直对齐属性:

.Parent div
{
vertical-align : bottom;
}

小开

一个旧的帖子，但认为我会分享一个答案，任何人看。因为当你使用 absolute的时候，事情可能会出错。我会做的是

超文本标示语言

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

国安局

parentDiv{


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

对于大多数浏览器来说，这只会让底部的 div 返回到父 div.safe

小开

使用表格和表格单元格的 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

演示还有一个例子，如何使用相同的技术垂直中心对齐。

小开

我有类似的东西，并得到它的工作有效 adding some padding-top的孩子。

我相信这里的一些其他答案会得到解决方案，但我不能让他们很容易地工作了很多时间后，我取而代之的填充顶部的解决方案，这是优雅的简单，但似乎有点黑客对我来说(更不用说它设置的像素值可能取决于父高度)。

小开

在大多数情况下，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>

我意识到这不是一个新的答案，但我想对这种方法发表评论，因为它会引导我找到我的解决方案，但作为一个新手，我不能发表评论，只能发表文章。

小开

七年后的搜索垂直排列仍然带来这个问题，所以我将张贴另一个解决方案，我们现在有可用的: 柔性箱定位。只需在父 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
}

小开

也可以使用垂直对齐

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>

小开


<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>