将子DIV移出父DIV

Question

我直接说了。我有一个子div，它的宽度是100%，并且位于具有固定宽度的包装器下面。我想知道如何使子div“打破”并具有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>

这里可以找到Fiddle http://jsfiddle.net/qMYQw/

除了"banners" div之外，还有几个部分在该div的上方和下方，这就是为什么"banners"在wrapper中的原因

P.S. banner DIV上方/下方还有其他部分，所以简单地设置position:absolute并不能解决问题。

- tokmak

---

你必须使用 position:absolute 来使元素脱离文档流。 - Kheema Pandey

Answer 1

{{链接1：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%;
}

- Gibbs

Answer 2

在你的横幅中使用 position:absolute。

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

演示

- Suresh Ponnukalai

---

我知道这个，但是除了“banner” DIV之外，还有更多的部分在该部分上方/下方，所以仅设置位置会重叠它们。 - tokmak

顶部的横幅 div 不会有任何问题。只有底部的 div 有问题。在这种情况下，您必须明确指出横幅的高度作为 div 底部的上边距。请查看此链接：http://jsfiddle.net/qMYQw/7/ - Suresh Ponnukalai

是的，但我不能为横幅div声明高度，因为该网站是响应式的，在较小的分辨率下看起来会很奇怪。http://goo.gl/IDxE5b 是该网站，底部有3个方框，您会明白我的意思。 - tokmak

Answer 3

将以下内容放入CSS中并查看结果：

在这里放置小提琴链接： 这是小提琴

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

- Er. Sajal Tiwari

Answer 4

最简单的答案是将您的 banners div 从包装器中取出，并在 banners div 后重新启动一个新的包装器。

JSfiddle演示

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

- Paulie_D

Answer 5

使用 z-index。

.wrapper {
    z-index : 1
}

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

- Rahiil

Answer 6

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

更新的 fiddle：http://jsfiddle.net/qMYQw/3/

- Brandon Gano

Answer 7

如果您喜欢HTML的结构方式，只需让横幅变大两倍，然后让图像填充其余空间即可。

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

- doppler