将内部div移至外部父div的右下角

Question

我希望我的内部div位于外部div的右下角，使用float: right，但由于某种原因，它会一直保留在外部div的右下角左下角。我究竟做错了什么？

#outer { 
 
width:100%; 
 
height:20%; 
 
border: 1px solid black; \t 
 
position: absolute; \t \t 
 
} \t 
 
#inner { 
 
width: 50px 
 
height: 50px; 
 
border: 1px solid red; 
 
position: absolute; 
 
float: right; \t \t 
 
bottom: 0; \t \t 
 
}

<div id = 'outer'> 
 
<div id = 'inner'> 
 
bottom-right corner; \t 
 
</div> \t 
 
</div>

Answer 1

添加right: 0代替。

如果绝对定位，浮动元素不会对其产生任何影响。

#outer { 
 
    width: 100%; 
 
    height: 20%; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
} 
 
#inner { 
 
    width: 50px height: 50px; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div id='outer'> 
 
    <div id='inner'> 
 
    bottom-right corner; 
 
    </div> 
 
</div>

Answer 2

改变的CSS属性外层div如下：

#inner { 
    width: 50px 
    height: 50px; 
    border: 1px solid red; 
    position: absolute; 
    bottom: 0; 
    right:0 
}