Question

我会直截了当地说。我有一个宽度为100％的儿童div，它位于具有固定宽度的包装下。我想知道如何让孩子成为一个孩子，并且＃34;突破＆＃34;并拥有100％的全屏页面宽度。代码是这样的，我试着玩相对/绝对定位，但没有运气。

<div class="wrapper">
    <div class="banners">
        <div class="first"><img src="http://placehold.it/200x200"></div>
        <div class="second"><img src="http://placehold.it/200x200"></div>
    </div>
</div>

可以找到小提琴here

旁边＆＃34;横幅＆＃34; div，上面和下面几个部分都没有，这就是它的原因＆＃34; banner＆＃34;在包装中

Answer 1

您可以向.banners添加绝对位置，但这会将.banners容器定位在与上述元素相关的绝对位置。

.banners {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

示例：http://jsfiddle.net/qMYQw/

Answer 2

发表评论后，我在此更新了您的div：http://jsfiddle.net/qMYQw/1/ 所以你给你的img一个id，这样你就可以轻松地用js来调用它。然后你得到浏览器视口：

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

然后你改变了风格：

var z = document.getElementById('changed');
z.setAttribute('style','width:'+w+'px');

你可以放 z.setAttribute('style','border:1px solid blue;width:'+w+'px');如果你想要额外的CSS。

如果您需要50％，那么您可以轻松地执行此操作：

var w = (Math.max(document.documentElement.clientWidth, window.innerWidth || 0))/2;

您也可以将其应用于其他div。

包装内的全宽子DIV

2 个答案: