Pek*_*ica 1 html javascript css
如果我有一个100%宽的div元素,padding左边和右边有12个像素,我在div中有一个元素,我想从屏幕的一个角落到另一个角落(桥接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>