如何忽略父母div的中心位置

Question

div（page-wrap）是頁面容器，它的寬度爲960px，位置居中在頁面中間。我想要一個忽略這個並具有頁面寬度的子div。

.page-wrap { 
    min-height: 100%; 
    max-width: 960px; 
    margin:0 auto; 
    /* equal to footer height */ 
    margin-bottom: -50px; 
} 

我想這個div忽略上述

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 0; 
    padding: 0; 
} 

HTML

​​

Answer 1

您可以使用position: absolute;只有當不存在與任何position:relative父元素，否則就沒有選項來實現這一目標，我猜。

.page-wrap { 
 
    min-height: 100%; 
 
    max-width: 360px; 
 
    margin: 0 auto; 
 
    /* equal to footer height */ 
 
    margin-bottom: -50px; 
 
} 
 

 
hr { 
 
    display: block; 
 
    height: 1px; 
 
    border: 0; 
 
    border-top: 1px solid #ccc; 
 
    margin: 0; 
 
    padding: 0; 
 

 
    /*added*/ 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div class="page-wrap"> 
 
    <img src="logo.jpg" width="150px" height="75px"> 
 
    <hr/> 
 
</div>

Answer 2

他們是3種位置的CSS：

• 靜態
• 相對
• 固定
• 絕對

在你的情況，你要使用其中的任何除非絕對。嘗試看看最適合您需求的東西。

read this

Answer 3

似乎砍十歲上下，但它可能工作。

已知的寬度方法。

https://jsfiddle.net/eulloa/5308kd5r/2/

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 0; 
    padding: 0; 
    /* addition */ 
    margin-left: -33.33%; 
    margin-right: -33.33%; 
} 

來源。包括替代品。 https://css-tricks.com/full-width-containers-limited-width-parents/