我是学习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%;
}
答案 0 :(得分: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;
}
答案 1 :(得分:-1)
一种方法是将图像置于绝对位置。代码如下:
<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%;
}
第二种方法:将图像放在页脚内,在这种情况下,您需要更改页脚高度,因为它是绝对定位的。
第三种方法:只需将页脚放在内容流中即可。删除绝对定位。