Question

我正在使用HTML / CSS构建网站，但我遇到了问题。我有两个div，一个漂浮在左边，另一个漂浮在右边。在我的浏览器中正常缩放看起来很好，但是当我放大时，div会相互重叠。我怎样才能修复它以便它们不这样做？

body {
    width: 100%;
    max-width: 960px;
    margin: auto;
    background: #336699;
}

.left {
    width:200px;
    height:500px;
    float:left;
    background-color: #999999;
}

.right {
    width:750px;
    height:500px;
    float:right;
    background-color: #999999;
}

<html>
<head>
    <link rel="stylesheet" href="style/style.css" />
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

Answer 1

问题出现是因为你的div有静态宽度......加起来它们都加起来为950px ......所以在低于950px的分辨率下它们会重叠。要解决此问题，您应该以百分比为单位给出宽度

例如

.left{
 width:20%;
}

.right{
 width:75%;
}

在这种情况下，它们总是占当前分辨率的20％和75％而不会重叠。

或者如果你想让它们保持原来的宽度，你应该删除float属性并考虑使用display:inline-block两者之间的边距。

Answer 2

我已将精确的px转换为百分比值。

.left{
 width:20.8%;
}

.right{
 width:78.1%;
}

Div在变焦时相互叠加

2 个答案: