Javascript 带填充的DIV的“突围”？_Javascript_Html_Css

Javascript 带填充的DIV的“突围”？

javascript html css

Javascript 带填充的DIV的“突围”？,javascript,html,css,Javascript,Html,Css,如果我有一个100%宽的div元素，左边和右边有12个像素的填充，并且我在div中有一个元素，我想从屏幕的一个角跨越到另一个角，桥接12个像素的间隙，那么我有没有可能在不使用绝对定位的情况下突破周围的div 使用位置：相对位置；左：-12px不能单独工作，因为div是100%宽的，我不能指定100%+12px使内部元素接触到右角。纯CSS解决方案： #breakout { margin-left: -12px; width: 100%; padding-left: 12px; padding-r

如果我有一个100%宽的div元素，左边和右边有12个像素的填充，并且我在div中有一个元素，我想从屏幕的一个角跨越到另一个角，桥接12个像素的间隙，那么我有没有可能在不使用绝对定位的情况下突破周围的div

使用位置：相对位置；左：-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移动到视觉上看起来好像忽略了父对象的填充：12px。起初我认为宽度：100%；右侧填充：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>

纯CSS解决方案：

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

在FF 3.5和IE8中测试工作。其他浏览器未经测试。在IE7或之前，这可能会很奇怪

以下是我的测试页面供参考：

<?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>

这是一个老问题，但对于谷歌用户来说，现在可以使用大众设备屏幕宽度和位置：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*/
}

这是一个老问题，但对于谷歌用户来说，现在可以使用大众设备屏幕宽度和位置：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*/
}

哇，这看起来很棒。我将在今天的某个时间尝试并给出反馈。我希望IE7能够配合，因为在这种情况下我确实需要它……干杯T.斯通，我在最初的问题中没有提到的是，在DIV中，我有一个WYSIWYG编辑器，需要拉伸DIV的整个宽度，所以填充不是一个选项。我玩了一点负边距和填充，但我从来没有设法伸展右侧的DIV，以便编辑可以伸展。我将不得不删除填充，找到一个解决办法，并给div 100%的自然宽度。无论如何谢谢你！哇，这看起来很棒。我将在今天的某个时间尝试并给出反馈。我希望IE7能够配合，因为在这种情况下我确实需要它……干杯T.斯通，我在最初的问题中没有提到的是，在DIV中，我有一个WYSIWYG编辑器，需要拉伸DIV的整个宽度，所以填充不是一个选项。我玩了一点负边距和填充，但我从来没有设法伸展右侧的DIV，以便编辑可以伸展。我将不得不删除填充，找到一个解决办法，并给div 100%的自然宽度。无论如何谢谢你！