Question

我已阅读Stackoverflow上的答案，了解如何在固定宽度容器内拉伸div到全宽。但是只有当内容位于一个固定容器内时，这些内容才有效，如果内容位于宽度不同的许多div标记内，该怎么办。

<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>

将position设置为absolute和left以及right设置为0根本不起作用。

Answer 1

这是一个jsfiddle，可以帮助你http://jsfiddle.net/Fm7M5/

在你的例子中

（如果我理解正确的话），一旦CONTAINER的宽度为50％，所有嵌套元素的宽度都是100％。所以，未经批准的divs＆amp; CONTAINER-TO-STRETCH的自动宽度均为CONTAINER的100％。

所以，你需要给CONTAINER-TO-STRETCH一个宽度大于其容器宽度的宽度。

在jsfiddle中，您可以看到以下内容（其中TEST是给予其中一个未分割的div的类）

    .container {
    background-color: red;
}

.container-to-stretch {
    background-color: yellow;
    width: 400%;
}

.test {
    width: 25%;
    background-color: blue;
}

所以，CONTAINER的宽度是身体的50％，TEST的宽度是身体的50％的25％，而CONTAINER-TO-STRETCH的宽度是50％的50％的400％身体的百分比。

在许多容器内部时，将Div拉伸到浏览器宽度

1 个答案: