我正在使用 HTML/CSS 构建网站，但遇到了问题。我有 2 个 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>
最佳答案
出现问题是因为您的 div 具有静态宽度...将它们加起来为 950px...因此在低于 950px 的分辨率下它们会重叠。要解决此问题，您应该以百分比形式给它们指定宽度
例如
.left{
width:20%;
}
.right{
width:75%;
}
在这种情况下，它们将始终占据当前分辨率的 20% 和 75%，并且不会重叠。
或者如果您希望它们保持原来的宽度，您应该删除 float 属性并考虑对它们使用 display:inline-block 并在两者之间留出空白。
关于html - Div 在缩放时相互堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25849965/