如何实现段落内容变长时让外层div向左而非向右扩展？

我明白你的需求——当段落内容变长时，希望红色的container1能向左（页面左侧）扩展，而不是默认的向右扩展。你尝试过direction: rtl但没生效，应该是没配合文本对齐的设置，或者没理清容器定位的逻辑。

先分析下当前问题：你的#container是绝对定位left:50%，这意味着它的左边缘在页面中线位置。里面的inline-block容器默认左对齐父容器的左边缘，所以内容变长时自然向右延伸。要实现向左扩展，我们需要让容器的右边缘对齐父容器的左边缘，或者改变容器的扩展方向。

下面提供两种可行的方案：

方案一：利用方向属性（direction）调整扩展方向 #

这个方案适配你之前尝试过direction的场景，只需要补充文本对齐设置，让英文文本保持正常左对齐的同时，容器向左扩展：

修改后的CSS代码：

#container {
  position: absolute;
  left: 50%;
}

#container1 {
  background-color: red;
  display: inline-block;
  direction: rtl; /* 设置容器的扩展方向为从右到左 */
}

#container1 p {
  text-align: left; /* 让段落文本保持左对齐，避免rtl导致的文本反转 */
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

原理：direction: rtl会让内联块容器的内容从右向左排列，因此当内容变长时，容器会向左扩展；给p标签设置text-align: left，可以保证英文文本依然是正常的左对齐显示，不会变成从右往左读的顺序。

方案二：利用定位变换（transform）实现右对齐 #

如果你不想调整文本方向，可以通过transform让容器整体向左偏移自身宽度，从而实现右对齐父容器的效果：

修改后的CSS代码：

#container {
  position: absolute;
  left: 50%;
}

#container1 {
  background-color: red;
  display: inline-block;
  transform: translateX(-100%); /* 向左偏移自身100%的宽度 */
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

原理：transform: translateX(-100%)会让container1向左移动自身的全部宽度，这样它的右边缘会对齐父容器#container的左边缘。当段落内容变长时，container1的宽度增加，偏移量也会自动跟着变大，自然就向左扩展了。

这两种方案都能实现你要的效果，你可以根据自己的实际布局场景选择。如果还有其他细节需要调整，随时补充说明~

内容的提问来源于stack exchange，提问作者fetzb