如何解决为什么div重叠
我尝试放置许多这样的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>
解决方法
您在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>
,
您应将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>
,
首先,您不能在同一文档中使用多个具有相同名称的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。