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

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 及其 parent 元素在定位和溢出方面的表现，这里有 ~~2 个样本。~~ 可用于支持旧版浏览器的示例。对于较新的，请查看 "duplicate" 问题的答案。

待办事项：将您的图片添加回来，因为我删除了它以仅显示 div。

~~第一个~~ 这使用 position: absolute ~~（如果针对较旧的浏览器则使用此）~~ 如果 none 中的 parent 元素的定位类似于 position: relative/position: absolute 或宽度小于视口结合 overflow: hidden.

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

编辑

如果.extradiv后面有内容，需要在.wrapextra上设置一个固定高度，与.extra的内容高度相匹配] div 适当地 "push" 内容下来。

如果无法设置固定高度，则需要一个小脚本来动态计算和设置它，这里有一个演示：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>

第二个使用 "viewport units"（仍然很好的浏览器支持，IE9 及更高版本）并且如果 parent 元素中的 none 具有更小的宽度，则可以使用比视口结合 overflow: hidden.

此外，如果任何 parent 具有类似 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>

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

Remove an element from the forced width that the parent container is applying to the element

css

containers

element

parent