将div延伸到父容器之外

Question

我有一个嵌套的div的一定布局。 我想扩展其中之一。 但是，这种嵌套并不是那么简单-我认为。

HTML：

<div class="wrapper">
    <div class="gridcontent">
        <div class="gcrow single-column">
            <div class="gccolumn">
                <div class="gccolumn-inner">
                    <div class="gcitem">
                        <p>Extend to .wrapper width</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我无法更改html，并且可能还有其他.gcrow需要保留在容器内。 这有可能吗？

在这里摆弄 。

我希望我的问题有道理。

Answer 1

尝试这样的事情

.gcrow {
  position: relative;
  overflow: visible;
}

.gcitem {
  position: absolute;
  right: 0;
  top: 0;
}

Answer 2

对于当前的HTML结构，您可以使用.gcrow:first-child并设置min-width: 100vw ，如果您从html, body删除默认边距和填充，则该宽度与wrapper宽度相同。

您可以使用position: relative ， left: 50%并使其居中，只需添加transform: translateX(-50%) ，这就是Fiddle

 body, html { margin: 0; padding: 0; } * { box-sizing: border-box; } .wrapper { width: 100%; padding-left: 20px!important; padding-right: 20px!important; border: 1px solid pink; } .gridcontent { width: 100%; max-width: 1018px; border: 1px solid #333; margin: 0 auto; } .gcrow { max-width: 100%; width: 100%; border: 1px solid #f00; } .gcrow:first-child { min-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } 

 <div class="wrapper"> <div class="gridcontent"> <div class="gcrow single-column"> <div class="gccolumn"> <div class="gccolumn-inner"> <div class="gcitem"> <p>Extend to .wrapper width</p> </div> </div> </div> </div> <div class="gcrow single-column"> <div class="gccolumn"> <div class="gccolumn-inner"> <div class="gcitem"> <p>Leave me alone</p> </div> </div> </div> </div> </div> </div> 

还有其box-sizing: border-box而不是box-border