將內部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 
}