从父容器应用于元素的强制宽度中移除元素

Question

如何从父容器应用于元素的强制宽度中移除元素？

<div id="container"> <!-- This div is forcing the site to be 960px width. Also It holds all the content that the site has --> 
    <div id="extra"> <!-- I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border --> 
    <img src="orange.jpg"> 
    </div> 
</div> 

我无法编辑原始网站的CSS。这就是为什么我无法修改包含.container的代码的比例。我只能将CSS添加到网站。

我一直在尝试使用不同的位置命令，但他们似乎没有带来所需的解决方案。我无法从左到右获取图像范围。

我可以使用哪些解决方案来解决这个问题。我只能使用CSS。我正在通过SiteOrigin插件使用WordPress和PageBuilder。

Answer 1

根据您的.container div及其父元素在定位和溢出时的具体情况，此处为样本 。 您可以用来支持旧版浏览器的示例。对于较新的，请检查“重复”问题的答案CSS - how to overflow from div to full width of screen。

待办事项：添加您的图像，因为我删除它以显示div的唯一。

第一 这使用position: absolute （使用此如果定位到旧的浏览器） 和将工作，如果没有父元件具有像position: relative/position: absolute定位或具有比视口与overflow: hidden结合的小的宽度。

添加了.wrapextra以使绝对定位div 流与内容。

编辑

如果在.extra DIV之后应该出现的内容，你需要设置一个固定的高度上.wrapextra相匹配的.extra DIV正常“推”内容下的内容高度。

如果没有固定的高度可以设置需要一个小脚本钙质，动态设置它，这里是一个演示：Fiddle Demo

html, body {margin: 0} 
 
#container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    background-color: #ddd; 
 
} 
 
#wrapextra { 
 
    background-color: #f99; 
 
} 
 
#extra { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    min-width: 960px; 
 
    height: auto; 
 
    background-color: #ff9; 
 
}

<div id="container"> 
 
    This div is forcing the site to be 960px width.<br/> 
 
    Also It holds all the content that the site has 
 
    <div id="wrapextra"> 
 
    <div id="extra"> 
 
     I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border 
 
    </div> 
 
    </div> 
 
</div>

第二种是使用“视窗单位“（仍然相当不错的浏览器支持，IE9及以上），并且如果没有父元素的宽度小于与 overflow: hidden相结合的视口宽度，它将工作。

此外，如果任何父母有像position: absolute定位这也可能使此示例不起作用。

当视口的宽度大于960像素时，添加了@media查询以使额外的div 伸展。

html, body {margin: 0} 
 
#container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    background-color: #ddd; 
 
} 
 
#extra { 
 
    background-color: #ff9; 
 
} 
 
@media (min-width: 960px) { 
 
    #extra { 
 
    position: relative; 
 
    left: 50%; 
 
    margin-left: -50vw; 
 
    width: 100vw; 
 
    } 
 
}

<div id="container"> 
 
    This div is forcing the site to be 960px width.<br/> 
 
    Also It holds all the content that the site has 
 
    <div id="extra"> 
 
     I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border 
 
    </div> 
 
</div>

Answer 2

您需要将html设置为不同的方式才能使用。你需要像下面的代码。这将有效地将你的容器分成两个，允许你在它们之间有全宽div。

<div class="container"> 
    content here...... 
</div> 

<div id="extra"> 
    <img src="orange.jpg"> 
</div> 

<div class="container"> 
    more content here...... 
</div> 

只是适用width: 100%;到#extra得到它全宽

正如指出的@LGSon我有重复的ID。如果您将它们换为课程，并将样式添加到.container以使它与#container设置相同，则此功能适用于您。