Question

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

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

小提琴可以在http://jsfiddle.net/qMYQw/

找到

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

P.S上面还有其他部分/吼叫横幅DIV，所以只需设置位置：绝对不会做的伎俩

Answer 1

仅在position: absolute div上使用.banners，它应该可以解决问题。请注意，您还需要设置left: 0。

更新了小提琴：http://jsfiddle.net/qMYQw/3/

Answer 2

使用position:absolute作为横幅。

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

DEMO

Answer 3

Fiddle

.banners img {  
    width:100%;
}

.banners .first, .banners .second {
    float:left;
    width:50%;
    position: absolute;
    left:0;
    border:1px solid blue;
}

.banners .second {
    margin-left: 50%;
}

Answer 4

将其放入您的CSS并查看结果： Here is fiddle

.wrapper {
    width:500px;
    height:600px;
    margin:0 auto;
    border:1px solid red;

}
.banners img {
    width:100%;
    border:1px solid blue;

}
.banners .first, .banners .second {
    float:left;
    width:49%;
    height:1200px;
    border:1px solid GREEN;
}

Answer 5

最简单的答案是从包装器中取出banners div并在banners div

之后重新启动一个新的包装器

JSfiddle Demo

**HTML**

<div class="wrapper"></div>

<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 class="wrapper"></div>

<强> CSS

.wrapper {
    width:500px; /* or whatever */
    height:200px; /* demo height only */
    margin:0 auto;
    border:1px solid red;
}
.banners {
    overflow: hidden; /* quick clearfix */
}
.banners img {
    width:100%;
    border:1px solid blue;
}
.banners .first, .banners .second {
    float:left;
    width:50%;
}

Answer 6

使用z-index

.wrapper {
    z-index : 1
}

.banners {
    position : absolute;
    left : 0;
    width: 100%;
    z-index:2
}

Answer 7

如果你喜欢HTML结构的方式，你可以简单地告诉横幅要大2倍，然后让图像填满剩下的空间。

＆＃13;

.wrapper {
    width: 150px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid red;
}
.banners { 
    width: 200%;
    margin-left: -50%; 
}
.banners .first, 
.banners .second {
    float: left;
    width: 50%;
}
.banners img {
    width: 100%;
    border: 1px solid blue;
}

＆＃13;

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

＆＃13;

将子DIV移到父DIV之外

7 个答案: