当我缩放时html内容改变位置？

Question

我已经搜索了我的问题的答案，但结果都没有解决它。

以下是我的内容在100％缩放时的样子：

以下是我放大后的内容：

这是我的CSS代码：

body {
    margin: 20px 10px 10px 10px;
    background-color: #F2F4F7 ;
}
div {
    max-width: 900px;
    min-height: 590px;
}
#div1{
    float: left;
    margin: 30px 0px 30px 30px;
    width: 900px;
    height: 590px;
    background: url("1234.jpg");
    background-size: cover;
    position:absolute;
}
#div2{
    margin: 30px 30px 30px 0px;
    background-color: #E7E8E9 ;
    float: right;
    width: 365px;
    height: 590px;
    position:static;
}

为什么缩放时我的内容会改变位置？

Answer 1

这是预期的行为，因为 html 和 body 元素宽度保持100％;

您可以尝试将两个 div 元素包装在固定宽度的同一容器中。