CSS 實現子 div 在父容器中右對齊的多種方案

場景需求

父 <div> 內有多個垂直分布的子 <div>（中間用 <br> 隔開），需讓子元素靠右對齊，並可預留右側間距。

方案對比

方案一：float: right（經典、兼容性好）

<div style="height: 300px; width: 300px; background: yellow; padding-right: 10px;">
    <div style="height: 100px; width: 60%; background: blue; float: right;"></div>
    <br>
    <div style="height: 100px; width: 60%; background: black; float: right;"></div>
</div>

• 優點：IE6+ 全支持，無需額外容器。
• 注意：浮動元素脫離文檔流，父容器需 overflow: hidden 或 clearfix 清除浮動防塌陷。

方案二：Flexbox（現代、推薦）

<div style="display: flex; flex-direction: column; align-items: flex-end; padding-right: 10px; height: 300px; background: yellow;">
    <div style="height: 100px; width: 60%; background: blue;"></div>
    <div style="height: 100px; width: 60%; background: black;"></div>
</div>

• 優點：代碼語義清晰，無浮動副作用，align-items: flex-end 直接實現右對齊，gap 替代 <br> 控制間距。
• 兼容：IE10+、所有現代瀏覽器。

方案三：Grid 布局（二維對齊利器）

<div style="display: grid; justify-items: end; padding-right: 10px; grid-template-rows: auto auto; background: yellow;">
    <div style="height: 100px; width: 60%; background: blue;"></div>
    <div style="height: 100px; width: 60%; background: black;"></div>
</div>

方案四：text-align: right + inline-block

<div style="text-align: right; padding-right: 10px; background: yellow;">
    <div style="display: inline-block; height: 100px; width: 60%; background: blue;"></div>
    <br>
    <div style="display: inline-block; height: 100px; width: 60%; background: black;"></div>
</div>

• 子元素變為行內塊，受父級 text-align 控制。

預留右側間距的統一做法

無論哪種方案，在父容器設定 padding-right: 10px（或所需值）即可，子元素自動縮留空間。

選型建議

Flexbox 以最少代碼解決最多對齊問題，建議作為首選方案。