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

親divのスタイルを設定し、子divposition: relative;に使用position: absolute; bottom: 0;します。

Answer 2

3番目のdivを#childdivに追加できます。

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