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

尝试这样的事情

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

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

Answer 2

对于您当前的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

将一个div（以及其他div）扩展到父容器之外

2 个答案: