html - 如何将 div 对齐到另一个 div 的底部

Question

我想让 3 个子 div 对齐到他父母的底部，我尝试过使用 margin-top 但它移动了洞的东西。

<div style="border:1px solid red;width:200px;height:100px;">


<div style="height:72px;width:96px;margin:9px;">

<div style="background-color:red;height:47px;text-align:center;">This div</div>

</div>


</div>

Answer 1

you can add the third div into the #child div.

<div id="parent">
   <div id="child">
      content
   </div>
</div>

#parent {
   position: relative;
   width: 200px;
   border: 1px solid red;
   height: 100px;
 }
#child {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: red;
 }

Answer 2

将父 div样式设置为子divposition: relative;并使用。position: absolute; bottom: 0;