將寬度添加到div的左側？

Question

如何將N個像素添加到div的寬度，但是將額外寬度添加到div的左側？

例如，簡單地將其寬度增加20px將在右側添加20px。

另一方面，我可以添加left-padding，但這並不能完全削減我。

有沒有一種方法可以真正將div擴展到左側使用CSS或Javascript？

同樣的問題關於擴大到頂部，而不是如果高度改變擴大到底部。

Answer 1

這裏有一些可能的選項：

• 調整CSS direction屬性，以使書寫模式RTL。
• 對於寬度問題，使用柔性佈局和flex-direction: row-reverse。
• 使用彈性佈局與flex-direction: column-reverse爲高度問題。

div { 
 
    direction: rtl; 
 
    width: 400px; 
 
    /* width: 450px; */ 
 
    background-color: lightgray; 
 
    height: 25px; 
 
} 
 
p { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    width: 450px; 
 
    /* width: 500px; */ 
 
    background-color: lightgreen; 
 
    height: 25px; 
 
} 
 
span { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    height: 50px; 
 
    /* height: 150px; */ 
 
    background-color: aqua; 
 
}

<div>with RTL, width expands the div leftward</div> 
 
<p>with flex-direction: row-reverse, to p simulates leftward expansion</p> 
 
<span>with flex-direction: column-reverse, the span simulates upward expansion</span>