我怎么能有第二个div行忽略父div的宽度

Question

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

Answer 1

使用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; 
} 

`

Answer 2

您可以定义中间的孩子宽度在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>