将宽度添加到div的左侧？答案

【问题标题】：Add width to left side of div?将宽度添加到div的左侧？
【发布时间】：2017-02-13 00:11:32
【问题描述】：

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

例如，简单地将其宽度增加 20px 会在右侧增加 20px。

另一方面，我可以添加 left-padding，但这并不适合我。

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

如果高度发生变化，关于展开到顶部而不是展开到底部的相同问题。

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：