我怎麼能有第二個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>