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

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

css

Css 从父容器应用于图元的强制宽度中删除图元,css,containers,element,parent,flow,Css,Containers,Element,Parent,Flow,如何从父容器应用于元素的强制宽度中删除元素 <div id="container">  <div id="extra"> <!-- I would like to make this div responsive full width so th

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

<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。

你需要以不同的方式构建你的

html

。您需要有如下代码。这将有效地将您的容器一分为二，允许您在它们之间设置全宽div

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

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

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


内容在这里。。。。。。
这里有更多内容。。。。。。

只需应用

宽度：100%

到

#extra

以获得全宽

正如@LGSon所指出的，我有重复的id。如果您将它们交换为类，并将样式添加到

.container

中，使其与

#container

的设置相同，这应该适合您。

您需要以不同的结构构建

html

，才能使其工作。您需要有如下代码。这将有效地将您的容器一分为二，允许您在它们之间设置全宽div

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

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

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


内容在这里。。。。。。
这里有更多内容。。。。。。

只需应用

宽度：100%

到

#extra

以获得全宽

正如@LGSon所指出的，我有重复的id。如果将它们交换为类，并将样式添加到

.container

中，使其与

#container

的设置相同，这应该对您有用。

根据

.container

div及其父元素在定位和溢出时的设置，这里有两个示例。可用于支持旧浏览器的示例。对于较新的问题，请检查“重复”问题的答案

Todo:在我删除您的图像时将其添加回以仅显示该div

第一种方法使用

position:absolute

（如果要针对较旧的浏览器，则使用该方法），并且如果没有任何父元素具有类似

position:relative

position:absolute

的定位，或者其宽度小于与

overflow:hidden

组合的视口，则可以使用该方法

添加了

.wrapextra

，以使绝对定位的div与内容一起流动

编辑

如果有内容应该出现在

.extra

div之后，则需要在

.wrapextra

上设置一个与

.extra

div的内容高度匹配的固定高度，以便正确地“推”下内容

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

html，正文{margin:0}
#容器{
宽度：960px；
保证金：0自动；
背景色：#ddd；
}
#wrapextra{
背景色：#f99；
}
#额外的{
位置：绝对位置；
左：0；
右：0；
最小宽度：960像素；
高度：自动；
背景色：#ff9；
}


此div强制站点的宽度为960px。

此外，它还保存了网站拥有的所有内容
我想让这个div响应全宽，这样div保存的图像将始终从浏览器的左边框拉伸到右边框

根据您的

.container

div及其父元素在定位和溢出时的情况，这里有两个示例。可用于支持旧浏览器的示例。对于较新的问题，请检查“重复”问题的答案