html - 将DIV与底部或基线对齐

我正在尝试将子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，我需要它们全部与基线/底部对齐。

最佳答案

您需要添加以下内容:

#parentDiv {
  position: relative;
}

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

声明absolute元素时，将根据其不是static的最近父元素(必须为absolute，relative或fixed)进行定位。