gpt4 book ai didi

html - Div 在缩放时相互堆叠

转载 作者:行者123 更新时间:2023-11-27 23:52:51 26 4
gpt4 key购买 nike

我正在使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com