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

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

您需要以不同的方式构建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设置相同，那么这应该适合您。

Answer 2

根据你的.container div及其父元素在定位和溢出方面的含义，这里有 2个样本。一个可用于支持旧版浏览器的示例。对于较新的，请检查＆＃34;复制＆＃34;问题的回答CSS - how to overflow from div to full width of screen。

Todo：在​​我删除图像时将其添加回来以仅显示div。

第一个这使用position: absolute （如果要定位旧浏览器，则使用此），如果没有父元素的定位像{{1 }} / position: relative或宽度小于视口与position: absolute的结合。

添加了overflow: hidden以使内容具有绝对定位的div flow 。

修改

如果有内容应该显示在.wrapextra div之后，则需要在.extra上设置一个固定的高度，该高度与.wrapextra div的内容高度匹配正确＆＃ 34;推＆＃34;内容下来。

如果无法设置固定高度，则需要一个小脚本来计算并动态设置它，这是一个演示：Fiddle Demo

＆＃13;

＆＃13;

.extra

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二个使用＆＃34;视口单元＆＃34; （仍然是非常好的浏览器支持，IE9及更高版本），如果没有父元素的宽度小于视口与<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>的组合，则可以正常工作。

此外，如果任何父母的定位如overflow: hidden，这也可能使此样本无效。

当视口的宽度大于960px时，添加了position: absolute查询以使额外的div 拉伸。

＆＃13;

＆＃13;

@media

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;