代码之家 › 专栏 › 技术社区 › Richard

子div仅在右侧延伸并脱离父div

css3 css html

Richard · 技术社区 · 6 年前

例子。

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

3 回复 | 直到 6 年前

Pete Irfan TahirKheli 6 年前

你需要使用 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>

Temani Afif 6 年前

下面是另一种使用边距的方法:

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>

Rarblack Kev1n91 6 年前

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>