子div仅在右侧扩展和脱离父级

Question

我有一个位于屏幕中间的父容器。并且我需要子div在左侧以相对和法线对齐，但在div的右侧要突围并与屏幕右侧对齐。

示例。

我尝试使用常用的全角技术：

.child {
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
  margin-right: -50vw;
  right: 50%;
}

，然后对其进行修改，以使它不会出现在左侧。但这会导致右侧超出视口的右侧。

这是下面的基本结构。

body {
  background-color: #dddddd;
  padding: 0px;
  margin:0px;
}

.color__white {
  background-color: #ffffff;
}
.border__black {
  border: 1px solid #454545;
}

.parent {
  position: relative;
  width: 72rem;
  margin: 0 auto;
  max-width:80vw;
  padding:15px;
}

.child {
  padding: 15px;
}

<div class="parent color__white">
  <div class="child border__black">
    content
  </div>
</div>

Answer 1

您需要使用calc来计算突出部分的宽度（对于1440px以上的屏幕尺寸-您的rem小于80vw）：

body {
  background-color: #dddddd;
  padding: 0px;
  margin: 0px;
}

.color__white {
  background-color: #ffffff;
}

.border__black {
  border: 1px solid #454545;
}

.parent {
  position: relative;
  width: 72rem;
  margin: 0 auto;
  max-width: 80vw;
  padding: 15px;
}

.child {
  padding: 15px;
  box-sizing: border-box;
  width: 90vw;            /* this is just 90vw as the width of parent is 80vw, so extending bit to edge is the remaining 20vw / 2 */
}

@media screen and (min-width:1440px) {
  .child {
    width: calc(72rem + ((100vw - 72rem) / 2));
    /* this is the original 72rem width of the parent plus the size of the viewport minus the parent width divided by 2 - the extending bit between the window and parent */
  }
}

<div class="parent color__white">
  <div class="child border__black">
    content
  </div>
</div>

Answer 2

body {
  background-color: #dddddd;
  margin:0px;
}

.color__white {
  background-color: #ffffff;
}
.border__black {
  border: 1px solid #454545;
}

.container{
  position:relative;
  padding:0 10%;
  margin-bottom:5%;
}
.parent {
  position: relative;
  width: 100%;
  padding-top:5%;
  height:100vh;
  margin: 0 auto;
}

.child {
  position:relative;
  padding: 15px 15px;
  margin-left:5%;
  width: 90%;
  box-sizing:border-box;
}

<div class='container'>
<div class="parent color__white">
  <div class="child border__black">
    <p>content</p>
  </div>
</div>
</div>

Answer 3

这里是使用边距的另一种方法：

body {
  background-color: #dddddd;
  padding: 0px;
  margin: 0px;
}

.color__white {
  background-color: #ffffff;
}

.border__black {
  border: 1px solid #454545;
}

.parent {
  position: relative;
  width: 72rem;
  margin: 0 auto;
  max-width: 80vw;
  padding: 15px;
}

.child {
  padding: 15px;
  box-sizing: border-box;
  margin-right:-10vw; /*(100vw - 80vw)/2*/
}

@media screen and (min-width:1440px) {
  .child {
    margin-right:calc((72rem - 100vw)/2);
  }
}

<div class="parent color__white">
  <div class="child border__black">
    content
  </div>
</div>