如何让第二个div行忽略父div的宽度

Question

我有三个子div，并希望中间div忽略父div的宽度并采用全屏宽度（但它需要保持其位于第一个div之下）

Answer 1

您可以将中间子宽度定义为vw中定义的宽度：

.parent {
  width: 100px;
  height: 40px;
  background: blue;
}
.child {
  width: 100%;
  background: yellow;
}
.overflower {
  width: 100vw;
  background: red;
}

<div class=parent>
  <div class=child>child</div>
  <div class=overflower>overflows</div>
  <div class=child>child</div>
</div>

Answer 2

使用position: absolute标记解决了此问题。请参阅JSfiddle：https://jsfiddle.net/sachingpta/3qu3m466/。示例代码

`

html,body{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.parent{
    width: 300px;
    height: 100%;
    background-color: grey;    
    margin: 0 auto;
}
.child1{
    background-color: red;
}
.child2{
    background-color: green;
    position: absolute;
    left: 0px;
    right: 0px;
}
.child3{
    background-color: blue;
}

`