將內部div移動到外部父div的右下角

Question

我希望我的內部div位於外部div的右下角，使用float: right ，但由於某種原因，它會留在左下角。 我究竟做錯了什么？

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

 <div id = 'outer'> <div id = 'inner'> bottom-right corner; </div> </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

更改外部div的css屬性如下：

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