html - 为什么定位的 div 不扩展？

Question

我有一个带有 position:absolute, left:0, right:0; 的 div宽度:100%。这对我的代码很好。但是，当我添加了另一个具有 width:2000px; 的 div 时，我的第一个 div 宽度没有扩展。你能给我建议吗？

这是我的例子。 http://jsfiddle.net/vYhv4/

谢谢

Answer 1

position:absolute 属性相对于其祖先元素定位元素，在您的情况下是文档的 body，这不是您的 .displayElement 类。您可以做的一件事是将您的 .displayElement 类和绝对定位的 div .box 包含在一个容器内，该容器作为.box div 的祖先，定位相对。

像这样:

HTML

<div class="element-container">
    <div class="box">test</div>
    <div class="displayElement">
        flash slider comes here
    </div>
</div>

CSS

.element-container:before, .element-container:after {
    content:"";
    display:table;
}

.element-container:after {
    clear:both;
}

.element-container {
    zoom:1; /* ie  hasLayout fix */
    position:relative;
    display:inline-block;
}

Demo