移动父DIV外的子DIV [英] Move child DIV outside parent DIV

问题描述

我会直截了当地说。我有一个具有100％宽度的子div，它位于具有固定宽度的包装中。我想知道如何让子div爆发并具有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> 
  

小提琴可以在这里找到 http://jsfiddle.net/qMYQw/

除了横幅div之外，上面和下面还有更多的部分那div，这就是它的横幅包装的原因

PS上面还有其他部分/下面的横幅DIV，所以简单地设置位置：绝对不会做技巧 如果您喜欢HTML的结构化方式，可以简单地告诉横幅大2倍

，然后让图片填充空格的其余部分。

data-console =truedata-babel =false>

.wrapper {width：150px; height：200px;保证金：0汽车; border：1px solid red;}。banners {width：200％;余量：-50％; } .banners .first，.banners .second {float：left; width：50％;}。banners img {width：100％; border：1px solid blue;}

< div class = 包装 > < 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>

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

解决方案

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>

这篇关于移动父DIV外的子DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！