为什么div重叠

Question

我试着放很多这样的div。但有些地方出了问题，所有这些都是重叠的。

我试着在网上搜索，但找不到解决方案。

有什么解决方法吗？

谢谢。

#myProgress {
width: 100%;
background-color: #ddd;
max-width: 500px;
position: absolute;
overflow: hidden;
}
#gamename {
float: left;
height: 30px;
background-color: #4CAF50;
text-align: left;
line-height: 30px;
color: white;
overflow: hidden
}
#gamefps {
float: right;
width: 100px;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
overflow: hidden
}

<div id="myProgress">
<div id="gamename" style="width:30%">PUBG</div>
<div id="gamefps">85 FPS</div>
</div>
<br>
<div id="myProgress">
<div id="gamename" style="width:40%">VALORANT</div>
<div id="gamefps">95 FPS</div>
</div>
<div id="myProgress">
<div id="gamename" style="width:50%;">FORTNITE</div>
<div id="gamefps">110 FPS</div>
</div>
<div id="myProgress">
<div id="gamename" style="width:60%; ">APEX LEGENT</div>
<div id="gamefps">130 FPS</div>
</div>

Answer 1

您在css中使用position: absolute，同时从html中删除<br>

#myProgress {
width: 100%;
background-color: #ddd;
max-width: 500px;
position: relative; // Here change absolute with relative
overflow: hidden;
}

在您的代码中，如果您有多个相似的元素，那么使用class比使用id更好。

.myProgress {
width: 100%;
background-color: #ddd;
max-width: 500px;
position: relative;
overflow: hidden;
}
.gamename {
float: left;
height: 30px;
background-color: #4CAF50;
text-align: left;
line-height: 30px;
color: white;
overflow: hidden
}
.gamefps {
float: right;
width: 100px;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
overflow: hidden
}

<div class="myProgress">
<div class="gamename" style="width:30%">PUBG</div>
<div class="gamefps">85 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:40%">VALORANT</div>
<div class="gamefps">95 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:50%;">FORTNITE</div>
<div class="gamefps">110 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:60%; ">APEX LEGENT</div>
<div class="gamefps">130 FPS</div>
</div>

Answer 2

您应该将html代码中的postion: absolute和br标记删除为

#myProgress {
width: 100%;
background-color: #ddd;
max-width: 500px;
overflow: hidden;
}
#gamename {
float: left;
height: 30px;
background-color: #4CAF50;
text-align: left;
line-height: 30px;
color: white;
overflow: hidden
}
#gamefps {
float: right;
width: 100px;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
overflow: hidden
}

<div id="myProgress">
<div id="gamename" style="width:30%">PUBG</div>
<div id="gamefps">85 FPS</div>
</div>
<div id="myProgress">
<div id="gamename" style="width:40%">VALORANT</div>
<div id="gamefps">95 FPS</div>
</div>
<div id="myProgress">
<div id="gamename" style="width:50%;">FORTNITE</div>
<div id="gamefps">110 FPS</div>
</div>
<div id="myProgress">
<div id="gamename" style="width:60%; ">APEX LEGENT</div>
<div id="gamefps">130 FPS</div>
</div>

Answer 3

首先，不能在同一文档中使用多个具有相同名称的id。您必须将ID更改为类

position:absolute破坏了您必须删除的页面的工作流程。

.myProgress {
width: 100%;
background-color: #ddd;
max-width: 500px;
overflow: hidden;
}
.gamename {
float: left;
height: 30px;
background-color: #4CAF50;
text-align: left;
line-height: 30px;
color: white;
overflow: hidden
}
.gamefps {
float: right;
width: 100px;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
overflow: hidden
}

<div class="myProgress">
<div class="gamename" style="width:30%">PUBG</div>
<div class="gamefps">85 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:40%">VALORANT</div>
<div class="gamefps">95 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:50%;">FORTNITE</div>
<div class="gamefps">110 FPS</div>
</div>
<div class="myProgress">
<div class="gamename" style="width:60%; ">APEX LEGENT</div>
<div class="gamefps">130 FPS</div>
</div>