Question

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

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

另一方面，我可以添加left-padding，但这并不能完全消除它。

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

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

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>

在div的左侧添加宽度？

1 个答案: