用填充“突破”DIV？

Question

如果我有一個 100% 寬的 div 元素，左邊和右邊有 12 個像素的padding ，並且我在 div 中有一個元素，我想從屏幕的一個角跨越到另一個（彌合 12 像素的間隙），我是否有機會在不使用絕對定位的情況下“突破”周圍的 div？

使用position:relative; left:-12px position:relative; left:-12px不能單獨工作，因為 div 是 100% 寬，我不能指定“100% + 12px”來使內部元素接觸到右手角。

Answer 1

純 CSS 解決方案：

#breakout { margin-left: -12px; width: 100%; padding-left: 12px; padding-right: 12px; }

在 FF 3.5 和 IE8 中測試工作。 其他瀏覽器未測試。 使用 IE7 或更早版本可能會很奇怪。

我認為這樣做的原因是因為瀏覽器添加了帶有空白（填充）的標簽寬度。 在這種情況下， margin-left: -12px將 div 移動到視覺上看起來像是忽略了父級的padding: 12px 。 起初我以為width: 100%; padding-right: 12px; width: 100%; padding-right: 12px; 單獨工作，但它沒有。 我意識到這是因為使用了盒模型。 它沒有考慮初始填充，因為它與父級的填充一起折疊（或者我假設）。

作為參考，這里是我的測試頁面：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Hello</title>
    <style type="text/css">
        html, body { padding: 0; margin: 0; color: white; }
        #outer { padding: 12px; background-color: blue; }
        #breakout { background-color: red; margin-left: -12px; width: 100%; padding-right: 12px; padding-left: 12px; }
    </style>
</head>
<body>
    <div id="outer">
        <h3>Some content</h3>
        <div id="breakout">Breakout</div>
        <h3>More content</h3>
    </div>

</body>
</html>

Answer 2

一個老問題，但對於那些谷歌搜索的人，您現在可以使用vw （設備屏幕寬度）和position:relative來實現這一點：

.wrapper_div{
margin: 0 auto;
width: 50%;
padding: 20px;
}

.breakout_div{
position: relative;
width: 100%; /*Fallback for older browsers*/
width: 100vw; /*Percentage of full screen viewing width*/
left: calc(-50vw + 50%); /*Centres div*/
}

用填充“突破”DIV？

問題描述

2 個解決方案

解決方案1
5 已采納 2009-12-15 02:26:23

解決方案2
0 2020-10-22 00:27:26

用填充“突破”DIV？

問題描述

2 個解決方案

解決方案1 5 已采納 2009-12-15 02:26:23

解決方案2 0 2020-10-22 00:27:26

解決方案1
5 已采納 2009-12-15 02:26:23

解決方案2
0 2020-10-22 00:27:26