当我缩放时 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 元素包装在同一个容器中并固定宽度。