Move child DIV outside parent DIV

问题:

I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck.

<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>

Fiddle can be found here http://jsfiddle.net/qMYQw/

Beside "banners" div, there are few more sections both above and bellow that div, thats the reason it "banners" are in wrapper

P.S There are other sections above/bellow the banner DIV, so simply setting up the position:absolute doesnt do the trick

回答1:

Use position: absolute only on the .banners div and it should do the trick. Note that you'll also need to set left: 0.

Updated fiddle: http://jsfiddle.net/qMYQw/3/

回答2:

Use position:absolute for your banner.

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

DEMO

回答3:

Place this in ypur css and see result: 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;
}

回答4:

The simplest answer is to take your banners div out of the wrapper and restart a new wrapper after the 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%;
}

回答5:

Use z-index

.wrapper {
    z-index : 1
}

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

回答6:

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%;
}

回答7:

If you like the way your HTML is structured, you can simply tell the banners to be 2x larger and let the images fill the rest of the space.

.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;
}

<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>