html - 将一个 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 需要保留在容器内。这有可能吗？

Fiddle here .

我希望我的问题是有道理的。

Answer 1

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

您可以使用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