为什么div重叠答案

【问题标题】：Why div are overlapping为什么div重叠
【发布时间】：2020-08-18 06:57:43
【问题描述】：

我尝试将许多 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>

【问题讨论】：

标签： html css overlap

【解决方案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>

【讨论】：

如果它解决了您的问题，您能否接受它作为已回答，以便将您的问题标记为已解决。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：