将页脚放在页脚顶部

我是学习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%; 
    }

来源

2015-09-22 MANAUWER RAZA

尝试这样：

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; 
}

来源

2015-09-22 11:32:55

我试图把应该是**略高于**页脚中的图像。可以以某种方式在页脚内使用** div **，以便它们出现在它的上面？ –

更新了演示。 –

''不正确，您需要使用有效的HTML元素，因此我将其更改为div。当图像被更改为div时，它没有相对于任何父级定位，所以它正常流动了文档。我改变了，所以它也被绝对定位并抵消了页脚上方的值。真的，应该没有必要使用这样的位置来定位页脚。您在页脚上方的内容会使用正常的文档流将页脚推到底部，但是我只是想解决您的特定问题。 –

-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%; 
}

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

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

来源

2015-09-22 11:30:52 AlexG

将页脚放在页脚顶部

回答

相关问题