用填充物“突破”DIV？-解网

问：

如果我有一个 100% 宽的 div 元素，左右各有 12 个像素，并且我在 div 中有一个元素，我想从屏幕的一个角落跨越到另一个角落（弥合 12 像素的差距），我是否有机会在不使用绝对定位的情况下“突破”周围的 div？padding

使用不会单独工作，因为 div 是 100% 宽的，我无法指定“100% + 12px”来使内部元素接触右上角。position:relative; left:-12px

JavaScript HTML CSS

我认为这起作用的原因是浏览器添加了带有空白（填充）的标签宽度。在这种情况下，将 div 移动到视觉上看起来像是忽略了父级的 .起初我以为一个人会起作用，但事实并非如此。我意识到这是因为正在使用的盒子模型。它没有考虑初始填充，因为它与父级的填充（或者我假设是这样）。margin-left: -12pxpadding: 12pxwidth: 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>

干杯 T.Stone，我在最初的问题中没有提到的是，在 DIV 中，我有一个所见即所得的编辑器，需要拉伸 DIV 的整个宽度，因此填充不是一种选择。我稍微尝试了一下负边距和填充，但我从未设法拉伸右侧的 DIV，以便编辑器可以拉伸。我将不得不删除填充物，在那里找到解决方法并赋予 div 100% 的“自然”宽度。无论如何，谢谢！

0赞 Colin R. Turner 10/22/2020 #2

一个老问题，但对于那些谷歌搜索的人来说，您现在可以使用（设备屏幕宽度）并实现这一点：vwposition: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？

"Break out" of DIV with padding?

评论

评论