将DIV与底部或基线对齐 [英] Align DIV's to bottom or baseline

问题描述

我想要将子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 （必须绝对， relative 或 fixed ）。

I'm trying to align a child div tag to the bottom or baseline of the parent div tag.

All I want to do is have the child Div at the baseline of the Parent Div, here is what it looks like now:

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

Note

I will have multiple childDivs with varying heights, and I'll need them all to align to the baseline/bottom.

解决方案

You need to add this:

#parentDiv {
  position: relative;
}

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

When declaring absolute element, it is positioned according to its nearest parent that is not static (it must be absolute, relative or fixed).

这篇关于将DIV与底部或基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！