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

时间:2014-02-20 22:46:45

标签: html css absolute

我有如下设置:

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

正如你所看到的那样,很多东西文本都是包装的,因为它似乎正在压制其父级的边缘。我希望内部div能够呼吸并且内部的内容填充其容器。我不知道如何解决这个问题,但我一直认为一个绝对定位的元素打破了盒子模型,并且不会像这样。由于父级是相对的,它将相对于父级开始其位置,但宽度将能够在其父级容器之外延伸。我减少左值越多,盒子行为越好,但它偏离我想要它的中心。我也看了bootstraps CSS代码做下拉菜单,我想我做的几乎是同样的事情。

任何人都可以解释如何解决这个问题,也许可以解释为什么会发生这种情况?

2 个答案:

答案 0 :(得分:0)

您可以使用white-space:nowrap css

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

这将阻止您的内容的逻辑包装(换行),因为div包含在其父级中。

答案 1 :(得分:-1)

您需要在绝对定位元素上设置width属性。

width: 100%