將寬度添加到 div 的左側？

Question

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

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

另一方面，我可以添加left-padding ，但這對我來說並沒有完全減少。

有沒有辦法真正使用 CSS 或 Javascript 將 div 擴展到左側？

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

Answer 1

以下是一些可能的選擇：

• 調整 CSS direction屬性，使書寫模式 RTL。
• 使用 flex 布局和flex-direction: row-reverse解決寬度問題。
• 使用 flex 布局和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>