如果我有一个 100% 宽的 div 元素，在左边和右边有 12 个像素的 padding，并且我在 div 中有一个元素，我想从元素的一个 Angular 跨越屏幕到另一个(弥合 12 像素的差距)，我是否有机会在不使用绝对定位的情况下“突破”周围的 div？
使用 position:relative; left:-12px 不能单独使用，因为 div 是 100% 宽，我不能指定“100% + 12px”来使内部元素接触右上角。
最佳答案
纯 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>
关于javascript - 带填充的 DIV 的 "Break out"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1904818/