如何让负边距正常工作？答案

【问题标题】：How do I get negative margins working properly?如何让负边距正常工作？
【发布时间】：2012-10-03 21:02:11
【问题描述】：

这是我的site。

我正在尝试让黑色 div 脱离父 div 并跨越浏览器的宽度。

我正在尝试以负边距来执行此操作。

像这样

.aboutTop {
    background-color: black;
    width: 100%;
    height: 600px;
    position: relative;
    margin-left: -100px;
    margin-right: -100px;
}

注意：我已经用margin-left: -100%; 尝试过，只是使用上面的方法看看出了什么问题。

但是，margin-right 不起作用。

它只是将框向左移动 100 像素。

这是为什么？

【问题讨论】：

标签： html css

【解决方案1】：

margin-right 属性玩起来很有趣，当您左对齐时，它会在右侧创建空间而不是向右移动。在回答了您之前的相关问题后，我必须说，只需增加宽度以适应屏幕，而不是添加负右边距。您将框放在左角，现在增加宽度，并使其适合页面。

这是您必须做的。拿起整个分区并将其移出包含其宽度的父级使用：

#yourdiv{
position:absolute;
top:200px;
left:0;
background:black;
width:100%;
height:200px;

}

做最简单的方法...而不是乱来。把它从那个该死的父 div 中拿出来。

【讨论】：

使 div 更宽——比如说 200%——导致右侧额外滚动。
计算老兄...尝试不同的值或选择整个分区并将其粘贴到父分区之外。查看我正在进行的编辑

【解决方案2】：

删除margin-right并用margin-left调整它。

【讨论】：

@Anuji Adjusting margin-left除了左右移动什么都不做。我没有扩大浏览器的宽度。

【解决方案3】：

您将宽度设置为 100%（这样就是父级的 100%）
你说要在两边突破父宽度！
这相悖

左边距按预期工作，而右边距不是因为达到了 100% 的限制！

删除宽度：100%；一切顺利！

[编辑]
以上并未解决浏览器 100% 宽度问题
也许这可以用一些 javascript？

var screenwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;

然后类似

document.getElementById('aboutTop').style.width = screenwidth;

这需要您将 class='aboutTop' 更改为 id='aboutTop'

【讨论】：

是的，我注意到了！这只解决了“脱离父母”的问题
@Michael 使用max-width: 100% 怎么样？
@cimmanon 并且仍然拥有从父级继承的 100% 宽度。他想突破父级的100%宽度，得到浏览器的100%宽度。