Html div上意外的文本换行

我在开发一个库时遇到了一个奇怪的问题，可以归结为以下代码：

你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。 这里的代码非常简单：相同的文本放在不同的div中。所有div的位置都不同。我希望所有五个文本都以相同的方式显示，无论是在一行中还是分成多行。但是，左边的div没有文本换行，右边的div有

这种行为在Chrome 83、Firefox 77和Edge 83中是一致的

罪魁祸首似乎是左边的负数，因为如果我删除它们，它会一直显示出来，但在实际应用程序中我无法做到这一点，尽管考虑到这些偏移量是如何计算的

你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。 这是所有浏览器中的一个bug吗？或者这是合乎逻辑的吗

实际渲染：

预期渲染：

---

为您的div设置宽度，它们将保持预期的宽度。

由于某些原因，代码不适用于您 在您的示例中不起作用的代码是因为只有第一个子div本身在父div内，因为它的left属性为零，而其余div则在父div外，因为您给了它们负的left属性

如果我尝试通过给它50px的left属性来插入另一个I-e第二个数字div，它将正常运行，因为它将被视为其父div的一个成员

因为这个原因，代码为您工作 这就是工作代码的父div left属性为0px的原因，因此第一个子div left属性为200px，然后第二个子div属性为150px，依此类推。因此，所有子div都被视为其父div的一个成员。此处不能选择负数

你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。 你好，一些文字。

---

请参阅有关尝试设置权限的注释：0；对于main outer div，发生这种情况的原因是，您已将最外层div设置为绝对值。通过设置right:0，它将占用父对象右端的空间。在你的情况下，父母是身体。看起来@Fareed Khan给出的解释可以回答你的问题。如果你认为这是你问题的答案，那么你可以接受这个建议作为答案。它可以在将来帮助其他社区成员解决类似的问题。感谢您的理解。您不需要设置所有div的宽度来获得预期的行为。您只需要将容器div的宽度设置为100%，或者将其位置更改为相对，这会产生相同的效果。