将宽度添加到 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>