Question

如果我有一个100％宽的div元素，左边和右边有12个像素padding，我在div中有一个元素，我想从屏幕的一个角落到另一个角落（桥接12像素间隙），我是否有机会在不使用绝对定位的情况下“突破”周围的div？

使用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;单独会起作用，但事实并非如此。我意识到这是因为正在使用的盒子模型。它没有考虑初始填充，因为它与父级的填充崩溃（或者我假设）。

这里的参考是我的测试页面：

<?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 个答案: