从父容器应用于元素的强制宽度中删除元素[重复]

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 及其父元素在定位和溢出方面的情况，这里有2 个示例。 一个示例可用于支持旧版浏览器。对于较新的，请检查“重复”问题的答案CSS - how to overflow from div to full width of screen。

Todo：添加你的图片，因为我删除了它以仅显示 div。

第一个这使用position: absolute （如果针对较旧的浏览器使用这个）并且如果没有一个父元素的定位类似于position: relative/@ 987654326@ 或宽度小于与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 这样的定位，这也可能使该示例无法正常工作。

添加了@media 查询以在视口宽度大于 960 像素时使额外的 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 的设置相同，那么这应该适合您。