绝对定位的 div 被父级切断。

Question

我有如下设置：

http://jsbin.com/hevidoya/2/

正如您所看到的，许多内容文本正在换行，因为它似乎压在其父级的边缘上。我希望内部 div 能够呼吸并让里面的内容填充其容器。我不知道如何解决这个问题，但我一直认为绝对定位的元素会破坏盒子模型，并且不会表现得像这样。由于父级是相对的，因此它将相对于父级开始其位置，但宽度将能够延伸到其父级容器之外。左值减小得越多，框的行为就越好，但它偏离了我想要的中心位置。我还查看了用于执行下拉菜单的 bootstraps CSS 代码，我认为我正在做几乎相同的事情。

任何人都可以解释如何解决这个问题，或者解释为什么会发生这种情况？

Answer 1

您可以使用空白：nowrap css

<div style="position: absolute; top: 20px; left: 50px; white-space:nowrap;">
     <p>lots of stuff</p>
</div>

这将阻止内容的逻辑换行（换行），因为 div 包含在其父级中。