Question

这是我的site。

我试图让黑色div突破父div并跨越浏览器的宽度。

我试图用负边距来做这件事。

喜欢这样

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

注意：我已经使用margin-left: -100%;尝试使用上面的内容来查看出现了什么问题。

但是，保证金权利不起作用。

它只是将框向左移动100px。

为什么会这样？

Answer 1

边缘右边的属性很有趣，当你左对齐时，它会向右创建空间而不是向右移动。在回答了之前的相关问题后，我必须说，只需增加宽度以适应屏幕，而不是添加负右边距。你把盒子放在左角，现在增加宽度，使它适合页面。

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

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

}

这是最简单的方式......而不是搞乱。把它从那该死的父母那里拿出来。

Answer 2

您将宽度设置为100％（因此100％为父级）
你说你想突破两边的父宽度！
这是相互对立的

左边距正在按照假设执行，右边距不是因为达到了100％限制！

删除宽度：100％;你很高兴去！

[编辑]
以上并未解决浏览器问题的100％宽度 Mayby可以使用一些javascript吗？

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

然后像

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

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

Answer 3

删除margin-right并使用margin-left进行调整。

如何使负边距正常工作？

3 个答案: