javascript - 在div的左侧添加宽度？

Question

如何将 N 像素添加到 div 的宽度，但将额外的宽度附加到 div 的左侧？

例如，只需将其宽度增加 20px，右侧就会增加 20px。

另一方面，我可以添加 left-padding 但这对我来说不太合适。

有没有办法使用 CSS 或 Javascript 真正将 div 向左扩展？

如果高度改变，关于扩展到顶部而不是扩展到底部的相同问题。

Answer 1

这里有一些可能的选择:

• 调整 CSS direction 属性，使书写模式为 RTL。
• 使用带有 flex-direction: row-reverse 的 flex 布局来解决宽度问题。
• 使用带有 flex-direction: column-reverse 的 flex 布局来解决高度问题。

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>