如何将容器放在绝对定位盒内？

Question

以下是两种情况：

预期行为：http://jsfiddle.net/Xm2eR/7/

行为不一致：http://jsfiddle.net/Xm2eR/1/

如何使第二个示例像第一个示例一样工作？为什么会出现这种差异？

结论

我为父级设置了固定宽度。 使用绝对位置和身体作为父亲是非常棘手的（当你到达边缘时）

Answer 1

#menu {
    position: absolute;
    left:900px;
    border:1px solid black;
    height:40px;
    width:24px;
}

如果可能的话，

给#menu div一些固定的宽度

Answer 2

您需要简化代码。您需要做的就是设置float：left;对于内部元素和父元素中的定位。请参阅此示例：http://jsfiddle.net/Xm2eR/30/

#menu {
 border: 1px solid red;
 position:absolute;
 left:100px;   
}
.inner{
 border:1px solid black;
 float:left;
 padding:10px;
}

你的代码不起作用的原因是因为左边：800px太大了，内部元素没有任何空间可以浮动。这可以通过设置宽度或确保左调整有足够的空间浮动来修复。

Answer 3

如何不浮动内部div，而是使它们成为内联块，这对你的用例有用吗？

示例jsfiddle此处

如果这样做有效，那么IE7及以下版本需要一个小的解决方法，并且在某种程度上需要在内联块规则

之后为IE提供规则#menu div {display: inline;}