Question

我有一个960px宽的容器和两个包含在其中的段落。

我还有一个full类的div，我想打破容器并填充浏览器窗口的宽度（注意我的身体边距也是40px）

我尝试使用左右边距-100%来完成它，这一半有效，但使div比我想要的要广泛。

简而言之，如果浏览器的宽度为1280px，则完整应该变为1200px宽（因为两边都是40px）

有什么想法吗？

HTML：

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <div class="full"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}

body
{
    margin: 40px;
}
.container
{
    width: 960px;
    margin: 0 auto;
    background: yellow;
}
.full
{
    background: red;
    height: 320px;
    margin: 40px 0;
    margin-left: -100%;
    margin-right: -100%;
}

Answer 1

您可能无法突破父元素以使子元素全屏显示。

最好的方法是关闭内容<div>，启动.full div然后重新开始内容，如下所示：http://jsfiddle.net/LKGwv/1/embedded/result/

.full
{
    background: red;
    height: 320px;
    margin: 40px 0;
    width:100%;
}

position:absolute会破坏你的布局，让你的div“漂浮”在内容中的其他元素上。

Answer 2

位置.full是绝对的，所以它不会与它的父级有关系，而是与窗口有关系。我不知道你是否想要保持40px的保证金。如果您希望将left和right更改为40px。

.full
{
    background: red;
    height: 320px;
    left: 0;
    right: 0;
    position: absolute;
}

检查updated Fiddle和fullscreen view。

打破容器div

2 个答案: