Question

我是学习HTML和CSS的新手。我想在页脚顶部添加图像。我怎样才能实现它。

我创建了页脚并将图像放在一行中。但不知何故，我不知道如何将它们放在页脚顶部。 HTML和CSS如下。使用bootstrap中的样式表。

    <id ="image">
    <a href="#"><img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;" /></a>
    <a href="#"><img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
   </id>
<footer id="footer">
 <div class="container">
    <p>some text for the footer</p>
 </div>
</footer>

使用的CSS如下。

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align:center;
    background-color: #f5f5f5;
}
#image {
position: relative;
    bottom: 0;
    width: 100%;
    }

Answer 1

尝试这样的事情：

http://codepen.io/anon/pen/bVeQyb

<div id="images">
    <a href="#"><img src="http://placehold.it/80x80.png"></a>
    <a href="#"><img src="http://placehold.it/80x80.png"></a>
    <a href="#"><img src="http://placehold.it/80x80.png"></a>
    <a href="#"><img src="http://placehold.it/80x80.png"></a>
    <a href="#"><img src="http://placehold.it/80x80.png"></a>
   </div>

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align:center;
    background-color: #f5f5f5;
}
#images {
  text-align: center;
  position: absolute;
  bottom: 80px;
  width: 100%;
}

#images a{
  display: inline-block;
  margin: 0 10px;
}

Answer 2

一种方法是将图像置于绝对位置。代码如下：

<div id="image">
    <a href="#"><img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"/></a>
    <a href="#"><img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
    <a href="#"><img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"></a>
</div>
<footer id="footer">
    <div class="container">
        <p>some text for the footer</p>
    </div>
</footer>

#image {
    position: absolute;
    bottom: 60px;
    width: 100%;
}

第二种方法：将图像放在页脚内，在这种情况下，您需要更改页脚高度，因为它是绝对定位的。

第三种方法：只需将页脚放在内容流中即可。删除绝对定位。

将图片放在页脚顶部

2 个答案: