Question

我想出了如何将图标修复到页面底部，但现在由于某种原因只会显示一个。我试图将它们各自放在自己的div中，但仍然没有工作？

HTML：

<div style="position: relative">
       <img src ="./images/tw.jpg">
        <img src ="./images/ig.jpg">
        <img src ="./images/fb.jpg">
</div>

CSS：

img {
       height: 40px;
       width: 40px;
       position: fixed; 
       bottom: 0; 
       text-align: center;
     }

Answer 1

<div class="container">
    <img src ="./images/tw.jpg">
    <img src ="./images/ig.jpg">
    <img src ="./images/fb.jpg">
</div>
<style>
.container {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.container img {
    height: 40px;
    width: 40px;
}
</style>

Answer 2

在div

中添加position:fixed

div {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Answer 3

从css中删除'position：fixed'或将其替换为'position：relative'

页面底部有多个固定图标，但只有一个显示

3 个答案: