Question

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

由于

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

Answer 2

第一个div只会扩展到可视区域的宽度，在指定宽度更大之前，它不会扩展到该区域。

Answer 3

我认为这是因为.box正在与身体对齐。但是，当.displayElement比视口宽时，主体是100％宽并且不会增长。

是否有任何理由不能将.box宽度设置为2000px？

Answer 4

您的父容器的宽度设置可能小于2000px元素。我认为你的div绝对定位，左右为0，你的宽度将是你父容器的宽度。 width：100％不会将容器扩展到子容器的宽度，而是扩展到父容器。

为什么定位div不扩展？

4 个答案: