如何輕鬆地從包裝容器中脫出？

我有一個固定寬度的容器中心的某個內容：如何輕鬆地從包裝容器中脫出？

.container { 
    width: 1000px; 
    margin: auto; 
} 

<div class="container"> 
    content… 
</div>

現在我想創建裏面的內容水平線：

<div class="container"> 
    <p>Content foo…</p> 
    <hr> 
    <p>Content bar…</p> 
</div>

我喜歡的規則跨越整個頁面，而不僅僅是容器。我可以通過<hr>元素拉出容器做到這一點：

<div class="container"> 
    <p>Content foo…</p> 
</div> 
<hr> 
<div class="container"> 
    <p>Content bar…</p> 
</div>

有沒有一種方法，使<hr>跨越整個頁面寬度不把它從容器中？

來源

2014-01-23 zoul

您清楚地瞭解問題......是否有明顯的解決方案不合適的原因？然而，這可能會提供一個解決方案：http://css-tricks.com/full-browser-width-bars/ –

內容呈現在網站內部的部分視圖中，所以我寧可不關心任何容器可能會纏繞它。感謝這個鏈接，這非常接近我所追求的。 – zoul

顯然，自然答案是改變你現在的樣子佈置您的容器，但回答你的問題，你把它，你可以使用position: absolute然後CSS相鄰兄弟選擇+添加一些空間供小時在它被拿走之後。

http://jsfiddle.net/w248Y/1/

HTML

<div class="container"> 
    <p>Content foo…</p> 
    <hr/> 
    <p>Content bar…</p> 
</div>

CSS

.container { 
    width: 400px; 
    margin: auto; 
} 

p { 
    margin: 0; 
    padding: 0; 
} 

hr { 
    left: 0; 
    margin: 1em 0 0; 
    position: absolute; 
    width: 100%; 
} 

hr + * { 
    /*Doube the hr margin for even layout */ 
    margin-top: 2em; 
}

來源

2014-01-23 14:16:38 RichieAHB

CSS：

.container { 
    width: 100%; 
    margin: auto; 
} 
.container p { 
    width:1000px; 
}

HTML：

<div class="container"> 
    <p>Content foo…</p> 
    <hr> 
    <p>Content bar…</p> 
</div>

來源

2014-01-23 14:05:21 nisav

簡單的答案是否定的。有沒有簡單的方法。最簡單的做法是簡單地將每個P包裝在自己的容器中，並在每個容器外部使用HR。 http://jsfiddle.net/eEM5G/讓我知道如果這可以幫助你。

<div class="container"> 
    <p>Content foo…</p> 
</div> 
<hr> 
<div class="container"> 
    <p>Content foo…</p> 
</div> 


.container { 
    width: 1000px; 
    margin: auto; 
}

來源

2014-01-23 14:11:54

我看到走的是hr出流文件這樣的唯一方法：

hr { 
    position:absolute; 
    width:100%; 
    left:0; 
    border-left:0; 
    border-right:0; 
}

檢查此Demo Fiddle

來源

2014-01-23 14:18:05 DaniP

如何輕鬆地從包裝容器中脫出？

回答

相關問題