由于某种原因,它只能在主页上使用。有什么建议么?另一件事,该网站在这里:https://captainsapphire.github.io/ (暂时忽略其他问题)。
#footer-container {
align-items: center;
justify-content: center;
}
footer {
background-color: #1D3557;
color: #E63946;
position: absolute;
margin-bottom: 0;
width: 100%;
height: 4rem;
}
footer address {
float: left;
padding-top: 2%;
padding-right: 2%;
}
#footer-image {
width: 40px;
height: 40px;
float: right;
padding-top: 2%;
padding-right: 2%;
}
<div>
<footer id="footer-container">
<address>[email protected]</address>
<a href="https://www.artfol.co/captain_sapphire" target="_blank"><img src="https://github.com/CaptainSapphire/captainsapphire.github.io/blob/main/images/artfollogo.png?raw=true" id="footer-image"></a>
</footer>
</div>
这应该有帮助,我从
#footer-container中删除了
position: absolute
并添加了 margin-top: auto
将其推到底部,并编辑了一些填充值。
#footer-container {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #1D3557;
color: #E63946;
height: 4rem;
width: 100%;
margin-top: auto;
}
footer address {
padding-top: 2%;
padding-left: 2%;
}
#footer-image {
width: 40px;
height: 40px;
padding-right: 2%;
}
<div id="footer-container">
<address>[email protected]</address>
<a href="https://www.artfol.co/captain_sapphire" target="_blank">
<img src="https://github.com/CaptainSapphire/captainsapphire.github.io/blob/main/images/artfollogo.png?raw=true" id="footer-image">
</a>
</div>