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，还从<br>中删除了html

#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>

为什么div重叠

3 个答案: